How to choose between innerText or nodeValue?

Question

When do I need to change the text inside the span element that I should 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; 

Answer 1

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

From in this article :

If an element does not have subelements, just text, then it (usually) has one child element, access to which is equal to ElemRef.childNodes[0] . In this exact case, the equivalent of the W3C web standards ElemRef.innerText is ElemRef.childNodes[0].nodeValue .

Answer 2

• nodeValue is a standard W3C recommendation.
• innerText is specific to Internet Explorer, not standard. As well as:
  • Does not return the contents of <script> and <style> .
  • Awareness style, does not return the text of hidden elements.
  • Awareness of CSS styles, this will cause a re-layout.

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

In general, they are similar, but if you need better performance, you should use nodeValue .

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