When to use jQuery .html or .text on an element

Question

In this question that I posted (and was answered), I found out how to properly assign the value of a textbox to the value of a label. The answer was to use either

$('#txtBranchName').val($('#lblBranchName').html());

or

$('#txtBranchName').val($('#lblBranchName').text());

Is one preferable over the other? Are there performance differences, or would one method not work but the other would in particular situations?

related http://stackoverflow.com/questions/1910794/what-is-the-difference-between-jquery-text-and-html — Adriano, Dec 16 '14 at 14:10

Robert Koritnik · Answer 1 · 2013-01-24T15:37:54.427

20

Setting data

.text("Test") will escape any HTML tags (rendering Test)

.html("Test") will render them as actual HTML elements (rendering Test).

Reading data

.text() will return text nodes only (stripping tags)

.html() will return actual HTML string including tags.

Here's a JSFiddle that shows the difference both ways.

edited Jan 24 '13 at 15:37

answered Jan 24 '13 at 15:24

Robert Koritnik

103,639
52
277
404

1

It doesn't escape them, it ignores them. – Niet the Dark Absol Jan 24 '13 at 15:25
@Kolink: Yes when reading values. I've updated my answer to include info both ways. – Robert Koritnik Jan 24 '13 at 15:29
It does not render them as text. It extracts only text from html tags without styles.. – Exception Jan 24 '13 at 15:33
@Exception: I've said that when reading data `.text` only returns text nodes. Check my linked fiddle and you'll see what it does. Writing and reading. – Robert Koritnik Jan 24 '13 at 15:39

score 5 · Answer 2 · answered Jan 24 '13 at 15:25

5

If there are no HTML children of the label, then it's the same either way, however if there are any (such as a red "required" mark) it would be preferably to use .text() so you just get that mark rather than the HTML generating it.

answered Jan 24 '13 at 15:25

Niet the Dark Absol

320,036
81
464
592

score 5 · Accepted Answer · edited May 23 '17 at 10:31

Refer : What is the difference between jQuery: text() and html() ? and Differences between .text() and .html() with escaped < and > characters

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

jQuery.html() treats the string as HTML, jQuery.text() treats the content as text.

Unlike the .html() method, .text() can be used in both XML and HTML documents. 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.)

When to use jQuery .html or .text on an element

3 Answers3

Setting data

Reading data

Linked