What is the difference between jQuery: text() and html() ?
Solution 1:
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>Solution 2:
((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'
.innerHTMLis ~3x faster than.html(). - pure JS'
.nodeValueis ~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 (!).
See this complete benchmark:
// 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());
Solution 3:
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).
Solution 4:
The text() method entity-escapes any HTML that is passed into it. Use text() when you want to insert HTML code that will be visible to people who view the page.
Technically, your second example produces:
<a href="example.html">Link</a><b>hello</b>
which would be rendered in the browser as:
<a href="example.html">Link</a><b>hello</b>
Your first example will be rendered as an actual link and some bold text.
Solution 5:
Actually both do look somewhat similar but are quite different it depends on your usage or intention what you want to achieve ,
Where to use:
- use
.html()to operate on containers having html elements. - use
.text()to modify text of elements usually having separate open and closing tags
Where not to use:
-
.text()method cannot be used on form inputs or scripts.-
.val()for input or textarea elements. -
.html()for value of a script element.
-
Picking up html content from
.text()will convert the html tags into html entities.
Difference:
-
.text()can be used in both XML and HTML documents. -
.html()is only for html documents.
Check this example on jsfiddle to see the differences in action