Difference between text( ) and html( )

If you want to update some text within an element, the best way to do it is by using the text() method. Like many other jQuery methods, it will return the value of the text when called without arguments; but when called with an argument, it will set the text of an element. For example:

<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
// in text string will not be rendered and < is replaced by &lt; 
// and > is replaced by &gt
// in html string is rended to real html, and html will be replaced 
// in the containing tag
$("p1").html("<strong>Hello</strong>"); //<strong>Hey</strong>

When you pass in HTML to the text() method, it is automatically escaped for you. This means that jQuery replaces the symbol “<" with its HTML entity. The browser then displays this as the "<" symbol, but it’s not HTML, just plain text. The browser also escapes ">“. This means you’ll see the text “<strong>Hello</strong>”, and not the word “Hello” wrapped in strong tags.

Output :

The strong tag is escaped, so it’s not applied. This is where html() comes in. html() works exactly the same as text() but will not escape any HTML within it. This means that in the preceding example, if you use html() instead of text(), you’ll see that it’s interpreted as HTML, which means the strong tag is not escaped, and hence you’ll see the word “Hello”, which should now be bold.