CODEWITHSUNDEEP
javascript
user5103849
user5103849

Reputation:

What's the use of textContent/innerText when innerHTML does the job better?

This might be a newbie question for most of you but it was explained to me that innerText ONLY gets the element's text and it can't be modified using any HTML tags, while innerHTML does the same job and HTML can as well be used. So, what's the point in having all of them?

Upvotes: 3

Views: 5977

Answers (3)

Cynthia R. Douglas
Cynthia R. Douglas

Reputation: 9

Sadly, textContent does not work in IE 11. So far, innerHTML is pretty much the only one that consistently works on all browsers (I've tested my sites using it on 15+ versions of Firefox, several versions of IE (using virtualized Windows) and 20+ other browsers (including ones no one else has heard of). It works on every platform I've tried: Windows, Linux, OS X, Android, iOS.

I understand the potential security issues. This is why you always verify inputs into a form before posting them (and check them again if they are passed to another page for processing).

Upvotes: 0

Oriol
Oriol

Reputation: 288680

Advantages of textContent over innerHTML:

  • It works on all nodes, not only elements.

    var node = document.createTextNode('hello');
node.innerHTML; // undefined
node.textContent; // 'hello'

  • It gets the text contents of an element, without having to strip HTML tags manually.

    var el = document.createElement('div');
el.innerHTML = 'A<p>B<span>C</span>D</p>D';
el.textContent; // "ABCDD" (HTML tags stripped successfully)

  • It sets the contents of an element to a bunch of plain text, without having to HTML-escape it.

    var el = document.createElement('div');
el.textContent = 'A<p>B<span>C</span>D</p>D';
el.children.length; // 0 (plain text HTML-escaped successfully)

Sure, when you use them on elements, innerHTML can be more powerful. But when you only care about the text content but not HTML content, textContent is simpler and likely to have better performance.

So we have both of them, and choose the most appropriate for each case.

Upvotes: 9

Barmar
Barmar

Reputation: 782693

If you have an element that's just supposed to contain text, without any HTML formatting, you can assign to .textContent and not have to worry about the string possibly containing characters that look like HTML. For instance, suppose you have an input field, and the user enters something into it, which you then put into a DIV. The user isn't supposed to be able to enter HTML in the input field, so you want to copy it literally. So you write:

div.textContent = input.value;

If you wanted to do this with .innerHTML, you would have to write something like:

div.textContent = input.value.replace(/</g, '&lt;').replace(/&/g, '&amp;');

to prevent HTML from being interpreted.

When reading from an element, you can use .textContent if you just want to get the plain text of it, and ignore any formatting. E.g. if you have

<div id="x">This is <strong>important</strong> stuff</div>

you would use document.getElementById("x").textContent to get just "This is important stuff", and not have to remove the <strong> tag yourself.

BTW, don't use innerText, it's nonstandard and not supported in FireFox.

Upvotes: 3

Related Questions