nodeValue vs innerHTML and textContent. How to choose?

Question

I'm using plain js to alter the inner text of a label element, and I wasn't sure on what grounds I should use innerHTML or nodeValue or textContent. I don't need to create a new node or change the HTML elements or anything — just replace the text. Here's an example of the code:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

I looked through the jQuery source, and it uses nodeValue exactly one time but innerHTML and textContent several times. Then I found this jsperf test that indicates the firstChild.nodeValue is significantly faster. At least that's what I interpret it to mean.

If firstChild.nodeValue is so much faster, what's the catch? Is it not widely supported? Is there some other issue?

Solution 1

Differences between textContent/innerText/innerHTML on MDN.

And a Stackoverflow answer about innerText/nodeValue.

Summary

1. innerHTML parses content as HTML, so it takes longer.
2. nodeValue uses straight text, does not parse HTML, and is faster.
3. textContent uses straight text, does not parse HTML, and is faster.
4. innerText Takes styles into consideration. It won't get hidden text for instance.

innerText didn't exist in firefox until FireFox 45 according to caniuse but is now supported in all major browsers.

Solution 2

.textContent outputs text/plain while .innerHTML outputs text/html.

Quick example:

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

output: <a href="http://google.com">google</a>

example.innerHTML = '<a href="https://google.com">google</a>';

output: google

You can see from the first example that output of type text/plain is not parsed by the browser and results in the full content displaying. Output of the type text/html tells the browser to parse it before displaying it.

MDN innerHTML, MDN textContent, MDN nodeValue

Solution 3

The two I know well and work with are innerHTML and textContent.

I use textContent when I just want to change the text of a paragraph or heading like so:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

So, textContent just changes the text, but it doesn't parse HTML, as we can tell from the tags visible in plain text in the result there.

If we want to parse HTML, we use innerHTML like this:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

So, that second example parses the string I assign to the DOM element's innerHTML property as HTML.

This is awesome, and a big security vulnerability : )

(look up XSS if you want to know about security for this)

Solution 4

innerText is roughly what you would get if you selected the text and copied it. Elements that are not rendered are not present in innerText.

textContent is a concatenation of the values of all TextNodes in the sub-tree. Whether rendered or not.

Here is a great post detailing the differences

innerHTML should not be included in a comparison with innerText or textContent, as it is totally different, and you should really know why:-) Look it up separately

Solution 5

[Note: this post is more about sharing a specific data that might help someone than telling people what to do]

In case someone is wondering what's the fastest today: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent (for the second test, the span's content is plain text, results might change according to its content)

It seems that .innerHtml is the great winner in terms of pure speed!

(NOTE: I'm only talking about speed here, you might want to look for others criteria before choosing which one to use!)

View more solutions

Comments

[Bergi]

Uh, nodeValue doesn't parse html either

[DRP]

"Using textContent can prevent XSS attacks" developer.mozilla.org/en-US/docs/Web/API/Node/textContent

[Sam Hobbs]

What you say about innerHTML is so obvious to me that I sure don't understand why there are so many that did not get it.

[Yolomep]

so using innerText i can use things like <b>hey</b> and it would be bold?