Difference Between jQuery Text() And HTML()

In this post you will learn about the difference between jQuery text and HTML.

.html() – This jQuery function gets/sets the HTML of any element.
.text()- This jQuery function gets/sets the text (innertext) of any element.

Let’s take an example. I have placed a div element, which have a span tag as child and some text.

HTML :

This code given below is the sample HTML document

<div id=”dvFirst”>
<span>jQuery By Example </span>
</div>

Now in .ready() event, both the functions .html() and .text() functions are used on div and the output is placed in alert box.

$(function () {
alert(“Div HTML is: ” + $(“#dvFirst”).html());
alert(“Div content is: ” + $(“#dvFirst”).text());
});

Now, when you view this page in browser, there will be 2 alerts.

First alert box, will display below text.

Div HTML is: <span>jQuery By Example </span>

And second alert box, will display below text.

Div content is: jQuery By Example

As you see, that the .html() function provides you the inner html and text of the element while text function gives you only text.