Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I choose between innerText or nodeValue?

Tags:

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; 
like image 357
pencilCake Avatar asked Nov 19 '09 00:11

pencilCake


People also ask

What should I use innerText or textContent?

textContent gets the content of all elements, including <script> and <style> elements. In contrast, innerText only shows "human-readable" elements. textContent returns every element in the node. In contrast, innerText is aware of styling and won't return the text of "hidden" elements.

What is the difference between innerText and outerText?

Basically, innerText: what's between the tags of the element. outerText: content of the element, including the tags.

What is the difference between innerHTML innerText and textContent?

Put simply, innerText is aware of the rendered appearance of text, while textContent is not.

Is textContent faster than innerHTML?

Unlike innerHTML, textContent has better performance because its value is not parsed as HTML. For that reason, using textContent can also prevent Cross-Site Scripting (XSS) attacks. Unlike innerText, textContent isn't aware of CSS styling and will not trigger a reflow.


1 Answers

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.

like image 160
jtbandes Avatar answered Nov 07 '22 15:11

jtbandes