What the difference between text() and html() functions in jQuery ?
$("#div").html('<a href="example.html">Link</a><b>hello</b>');
vs
$("#div").text('<a href="example.html">Link</a><b>hello</b>');
What is the difference between jQuery: text() and html() ?
Viewed 176593
17 Answers
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>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).
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.
.text() will give you the actual text in between HTML tags. For example, the paragraph text in between p tags. What is interesting to note is that it will give you all the text in the element you are targeting with with your $ selector plus all the text in the children elements of that selected element. So If you have multiple p tags with text inside the body element and you do a $(body).text(), you will get all the text from all the paragraphs. (Text only, not the p tags themselves.)
.html() will give you the text and the tags. So $(body).html() will basically give you your entire page HTML page
.val() works for elements that have a value attribute, such as input.
An input does not have contained text or HTML and thus .text() and .html() will both be null for input elements.
Basically, $("#div").html uses element.innerHTML to set contents, and $("#div").text (probably) uses element.textContent.
http://docs.jquery.com/Attributes/html:
Set the html contents of every matched element
http://docs.jquery.com/Attributes/text:
Similar to html(), but escapes HTML (replace "<" and ">" with their HTML
entities).
$('.div').html(val) will set the HTML values of all selected elements, $('.div').text(val) will set the text values of all selected elements.
I would guess that they correspond to Node#textContent and Element#innerHTML, respectively. (Gecko DOM references).
The different is .html() evaluate as a html, .text() avaluate as a text.
Consider a block of html
HTML
<div id="mydiv">
<div class="mydiv">
This is a div container
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
a text after ul
</div>
</div>
JS
var out1 = $('#mydiv').html();
var out2 = $('#mydiv').text();
console.log(out1) // This output all the html tag
console.log(out2) // This is output just the text 'This is a div container Link 1 Link 2 a text after ul'
The illustration is from this link http://api.jquery.com/text/
**difference between text()&& html() && val()...?
#Html code..
<select id="d">
<option>Hello</option>
<option>Welcome</option>
</select>
# jquery code..
$(document).ready(function(){
$("#d").html();
$("#d").text();
$("#d").val();
});
Whenever possible use .text() as it escapes the HTML, especially if you are adding any untrusted data such as from user input. .html() has some xss vulnerabilities
var v = "全名";
$("#div").html(v); //display as "全名"
$("#div").text(v); //display as "全名"
text() – This method sets or returns the text content of elements selected. html() – This method sets or returns the content of elements selected. Refer example here : https://www.tutorialspoint.com/online_jquery_editor.php
Related