nodeValue vs innerHTML and textContent. How to choose?

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?

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.

.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"&gt;google&lt;/a&gt;

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

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.

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>

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

[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!)

Element.innerHTML property to set, or get element's HTML code.

Ex: We have a <h1> tag and strong style with it:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> To get content of the element has id equals to "myHeader", we will do the same:

var element = document.getElementById("myHeader");
element.innerHTML

Return result:

<strong>My Header</strong> Normal Text`

To "set" new content (value) for this element, the code will be here:

Element.innerHTML = "My Header My Text";

So this property not only works with plain text, but it is aimed at passing or copying HTML code.

=> We should not use it.

However, many programmers (including myself) use this attribute to insert text into a web page, and this method carries a potential risk:

1. Wrong operation: inserting each text only sometimes deletes all other HTML code of the inserted element.
2. For security: Of course, the two examples above are completely harmless, even if using the