CODEWITHSUNDEEP
htmlinnertextnodevalue
pencilCake
pencilCake

Reputation: 53323

How do I choose between innerText or nodeValue?

When I need to change a text within a span element, which one should I use and what is the difference:

var spnDetailDisplay=document.getElementById('spnDetailDisplay');
spnDetailDisplay.innerText=sDetail;

or

 var spnDetailDisplay=document.getElementById('spnDetailDisplay');
 spnDetailDisplay.childNodes[0].nodeValue=sDetail;

Upvotes: 24

Views: 11405

Answers (2)

mquan86
mquan86

Reputation: 86

  • nodeValue is standard recommendation W3C.
  • innerText is Internet Explorer specific, not the standard. And:
    • Does not return content of <script> and <style>.
    • Style awareness, does not return text of hidden elements.
    • CSS styling awareness, it will trigger a reflow.

However in versions of all major browsers as of March of 2016 innerText is supported.

In general, they are similar, but if you need the best performance, nodeValue should be used.

Link for performance test: https://jsperf.com/read-innerhtml-vs-innertext-vs-nodevalue-vs-textcontent/13

Upvotes: 4

jtbandes
jtbandes

Reputation: 118781

For elements with text content, they're the same. See this MDC article for information on nodeValue.

From this article:

If the element has no sub-elements, just text, then it (normally) has one child node, accessed as ElemRef.childNodes[0]. In such precise case, the W3C web standards equivalent of ElemRef.innerText is ElemRef.childNodes[0].nodeValue.

Upvotes: 18

Related Questions