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?

Answer 1

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 tag is still no problem because the HTML5 standard has prevented the execution of the command line inside the tag. when inserted into the web page via the innerHTML attribute. See this rule here.

Because of this reason, using innerHTML is not recommended when inserting plain text, instead use textContent. The textContent property will not understand that the code you pass is an HTML syntax, but just a 100% text no more and no less.

The result returns if using textContent in the above example:

My Header My Text

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

.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

Answer 6

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)