nodeValue vs innerHTML and textContent. How to choose? [duplicate]

Question

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">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

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)

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