What is the difference between jQuery: text() and html() ?
I think the difference is nearly self-explanatory. And it's super trivial to test.
jQuery.html()
treats the string as HTML, jQuery.text()
treats the content as text
<html><head> <title>Test Page</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#div1").html('<a href="example.html">Link</a><b>hello</b>'); $("#div2").text('<a href="example.html">Link</a><b>hello</b>'); }); </script></head><body><div id="div1"></div><div id="div2"></div></body></html>
A difference that may not be so obvious is described in the jQuery API documentation
In the documentation for .html():
The
.html()
method is not available in XML documents.
And in the documentation for .text():
Unlike the
.html()
method,.text()
can be used in both XML and HTML documents.
$(function() { $("#div1").html('<a href="example.html">Link</a><b>hello</b>'); $("#div2").text('<a href="example.html">Link</a><b>hello</b>');});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><div id="div1"></div><div id="div2"></div>
((please update if necessary, this answer is a Wiki))
Sub-question: when only text, what is faster, .text()
or .html()
?
Answer: .html()
is faster! See here a "behaviour test-kit" for all the question.
So, in conclusion, if you have "only a text", use html()
method.
Note: Doesn't make sense? Remember that the .html()
function is only a wrapper to .innerHTML
, but in the .text()
function jQuery adds an "entity filter", and this filter naturally consumes time.
Ok, if you really want performance... Use pure Javascript to access direct text-replace by the nodeValue
property.Benchmark conclusions:
- jQuery's
.html()
is ~2x faster than.text()
. - pure JS'
.innerHTML
is ~3x faster than.html()
. - pure JS'
.nodeValue
is ~50x faster than.html()
, ~100x than.text()
, and ~20x than.innerHTML
.
PS: .textContent
property was introduced with DOM-Level-3, .nodeValue
is DOM-Level-2 and is faster (!).
// Using jQuery:simplecron.restart(); for (var i=1; i<3000; i++) $("#work").html('BENCHMARK WORK');var ht = simplecron.duration();simplecron.restart(); for (var i=1; i<3000; i++) $("#work").text('BENCHMARK WORK');alert("JQuery (3000x): \nhtml="+ht+"\ntext="+simplecron.duration());// Using pure JavaScript only:simplecron.restart(); for (var i=1; i<3000; i++) document.getElementById('work').innerHTML = 'BENCHMARK WORK';ht = simplecron.duration();simplecron.restart(); for (var i=1; i<3000; i++) document.getElementById('work').nodeValue = 'BENCHMARK WORK';alert("Pure JS (3000x):\ninnerHTML="+ht+"\nnodeValue="+simplecron.duration());
The first example will actually embed HTML within the div
whereas the second example will escape the text by means of replacing element-related characters with their corresponding character entities so that it displays literally (i.e. the HTML will be displayed not rendered).