html() method versus text() method

Question

Some or more people use html() method to get element's text like the <p>text</p> and to get this $('p').html() or $('p').text().

And obviously I know there is huge difference between html method and text method. But I would like to know more on this context, what's the better to use?

Some one might say text method is better than html method, please explain why?

There is no concept of one being "better" than the other, only of one being better suited to solving *that particular problem* than the other. If you need the HTML, you obviously use `.html()`, if you want the HTML to be removed, you obviously use `.text()`. If you can guarantee they'll return exactly the same content regardless, it doesn't matter either way. — Anthony Grist, Apr 11 '14 at 10:53

score 0 · Answer 1 · answered Apr 11 '14 at 10:51

0

When you need html formatting/style while text is being rendered then you should use html() and when you need just text then go for text()

answered Apr 11 '14 at 10:51

Adil

146,340
25
209
204

score 0 · Answer 2 · answered Apr 11 '14 at 10:52

These methods are derived from textcontent / innerhtml..

$('#yourid').text() = document.getElementsByID('yourid')[0].textContent);
hello <span>

You should use .text() if you want to get the HTML without escaped characters..

$('#yourid').html() = document.getElementsByID('yourid')[0].innerHTML
hello &lt;span&gt;

If you wanted to set HTML or get raw escaped HTML you should use .html();

score 0 · Accepted Answer · edited May 23 '17 at 12:34

There are preferences for people to use when and why to use html and/or text method but I would like to inform you the html() method is faster than text() method:

html method is only a wrap to innerHTML, but with text method jQuery add an "entity filter", and this filter expand time.

.text() can be used in both XML and HTML documents.
.html() is only for html documents.

See more info here

~~So, which one you want to use?~~

Nagesh Salunke · Answer 4 · 2014-04-11T10:58:54.733

0

As per jQuery says,
The result of the .text() method is a string containing the combined text of all matched elements.

Due to variations in the HTML parsers in different browsers,
the text returned may vary in newlines and other white space.

The .text() method cannot be used on
form inputs or scripts.
As of jQuery 1.4, the .text() method returns the value of text and CDATA nodes as well as element nodes.*

edited Apr 11 '14 at 10:58

answered Apr 11 '14 at 10:56

Nagesh Salunke

1,278
3
14
37

score 0 · Answer 5 · answered Apr 11 '14 at 10:57

.text() adds the given expression as a text, .html() adds it to the dom as an html expression

here is an example;

var str = '<strong>HELLO</strong>'
$("#addHere").text(str);

=> you will see the actual string <strong>HELLO</strong> in #addHere

var str = '<strong>HELLO</strong>'
$("#addHere").html(str);

=> you will see a bold HELLO in #addHere

score 0 · Answer 6 · edited May 23 '17 at 10:33

jQuery provides 2 functions text() and html() and when to use text() function and when to use html() function is quite confusing as both the functions are different and serve different purpose.

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

What is the difference between jQuery: text() and html() ?

html() method versus text() method

6 Answers6