nodeValue vs innerHTML and textContent. How to choose?
Differences between textContent/innerText/innerHTML on MDN.
And a Stackoverflow answer about innerText/nodeValue.
Summary
- innerHTML parses content as HTML, so it takes longer.
- nodeValue uses straight text, does not parse HTML, and is faster.
- textContent uses straight text, does not parse HTML, and is faster.
- 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.
How do I choose between innerText or nodeValue?
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 ofElemRef.innerText
isElemRef.childNodes[0].nodeValue
.
innerText vs innerHTML vs label vs text vs textContent vs outerText
From MDN:
Internet Explorer introduced element.innerText. The intention is pretty much the same [as textContent] with a couple of differences:
Note that while textContent gets the content of all elements, including
<script>
and<style>
elements, the mostly equivalent IE-specific property, innerText, does not.innerText is also aware of style and will not return the text of hidden elements, whereas textContent will.
As innerText is aware of CSS styling, it will trigger a reflow, whereas textContent will not.
So innerText
will not include text that is hidden by CSS, but textContent
will.
innerHTML returns the HTML as its name indicates. Quite often, in order to retrieve or write text within an element, people use innerHTML. textContent should be used instead. Because the text is not parsed as HTML, it's likely to have better performance. Moreover, this avoids an XSS attack vector.
In case you missed that, let me repeat it more clearly: Do not use .innerHTML
unless you specifically intend to insert HTML within an element and have taken the necessary precautions to ensure that the HTML you are inserting cannot contain malicious content. If you only want to insert text, use .textContent
or if you need to support IE8 and earlier, use feature detection to switch off between .textContent
and .innerText
.
A main reason that there are so many different properties is that different browsers originally had different names for these properties, and there still isn't complete cross-browser support for all of them. If you are using jQuery, you should stick to .text()
since that is designed to smooth out cross-browser differences.*
For some of the others: outerHTML
is basically the same as innerHTML
, except that it includes the start and end tags of the element it belongs to. I can't seem to find much description of outerText
at all. I think that is probably an obscure legacy property and should be avoided.
Difference between innerText, innerHTML and value?
Unlike innerText
, though, innerHTML
lets you work with HTML rich text and doesn't automatically encode and decode text. In other words, innerText
retrieves and sets the content of the tag as plain text, whereas innerHTML
retrieves and sets the content in HTML format.
PHP DOM textContent vs nodeValue?
I finally wanted to know the difference as well, so I dug into the source and found the answer; in most cases there will be no discernible difference, but there are a bunch of edge cases you should be aware of.
Both ->nodeValue
and ->textContent
are identical for the following classes (node types):
DOMAttr
DOMText
DOMElement
DOMComment
DOMCharacterData
DOMProcessingInstruction
The ->nodeValue
property yields NULL
for the following classes (node types):
DOMDocumentFragment
DOMDocument
DOMNotation
DOMEntity
DOMEntityReference
The ->textContent
property is non-existent for the following classes:
DOMNameSpaceNode
(not documented, but can be found with//namespace:*
selector)
The ->nodeValue
property is non-existent for the following classes:
DOMDocumentType
See also: dom_node_node_value_read()
and dom_node_text_content_read()
TextNode or innerHTML
The first one will erase any HTML elements that might be inside your target element. The second will only work if the first child is a text node (a common mistake is to try and use it on an empty element).
The second is "more correct" (innerHTML
is really a haxy shortcut) but the first is certainly more reliable. That said, it is vulnerable to XSS injections.
To be completely correct, you would do this:
var abc = document.getElementById('abc');
while(abc.firstChild) abc.removeChild(abc.firstChild);
abc.appendChild(document.createTextNode("good morning"));
textContent working but nodeValue does not
The text portion of a node is actually a child of the node itself. If a node has no data in it, such as then a call to childNodes[0].nodeValue will fail. You need to check for how many childNodes are actually present before you attempt to access them. Otherwise you'll need to enforce a protocol that demands that when XML data is created it cannot contain empty tags.
How can new line be respected when updating content of a pre tag?
You seem to have misunderstood the answer you linked to. The answer states:
If you wish to have a string which spans multiple lines, you may insert a backslash character '
\
' just before you terminate the line, like so://Perfectly valid code
var foo = "Bob \
is \
cool.";However that string will not contain
\n
characters in the positions where the string was broken into separate lines. The only way to insert a newline into a string is to insert a character with a value of 10, the easiest way of which is the\n
escape character.var foo = "Bob\nis\ncool.";
So this is what you should be doing instead:
//Perfectly valid code
var foo = "Bob\nis\ncool.";
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('pre').textContent = foo;
});
<pre id="pre"></pre>
Related Topics
Need to Escape a Special Character in a Jquery Selector String
What Is Ajax and How Does It Work
Should I Be Using Object Literals or Constructor Functions
Best Cross-Browser Method to Capture Ctrl+S with Jquery
Basic JavaScript Promise Implementation Attempt
"Object Doesn't Support This Property or Method" Ie10/11
Difference Between JSON.Stringify and JSON.Parse
How to Do Associative Array/Hashing in JavaScript
JavaScript Drag and Drop for Touch Devices
Alternative to a Million If Statements
How to Share Code Between Node.Js and the Browser
How to Get Notified About Changes of the History via History.Pushstate
Jquery Selectors on Custom Data Attributes Using HTML5
How to Get a Url Parameter in Express
What Is "Export Default" in JavaScript
How to Strip All Punctuation from a String in JavaScript Using Regex