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.
Security: innerHTML vs textContent with API
The difference comes from the way your malicious code will be used.
Using the following code might show you the difference :
var container = document.querySelector("#container");
var json1 = "Link to an image of my house";
var json2 = "Link to an image of my boat";
var maliciousCode = "javascript:alert('test');\" xxx=\"maliciousCode3000\""
// Create p element with innerHTML
container.innerHTML += "<a href=\""+maliciousCode+"\">" + json1 + "</a>";
// Create p element with textContent, href and appendChild
var innerExample = document.createElement('a');
innerExample.textContent = json2;
innerExample.href = maliciousCode;
container.appendChild(innerExample);
Here's the fiddle: https://jsfiddle.net/vh8hLhbj/6/
You will see the first example shows the popup, whereas the second does not. Imagine if it is some javascript accessing cookies, or watching keyboard input, for example.
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/textContent vs. retrieving each text node
It's all about endlines and whitespace - browsers are very inconsistent in this regard, especially so in Internet Explorer. Doing the traversal is a sure-fire way to get identical results in all browsers.
comparing innerText/textContent with a value inside a variable
The variable isn't what you've defined it in node's scope, as evaluate runs in the browser's scope. You need to pass the variable to evaluate like below
.evaluate((____size) => {
var correctSize = document.getElementsByTagName('button');
for (var i = 0; i < correctSize.length; i++) {
if (correctSize[i].textContent.indexOf(____size) > -1) correctSize[i].id = 'thisone';
}
}, (____size))
then it works
Assuming you named the variable ____size...
What's the use of textContent/innerText when innerHTML does the job better?
Advantages of textContent
over innerHTML
:
It works on all nodes, not only elements.
var node = document.createTextNode('hello');
node.innerHTML; // undefined
node.textContent; // 'hello'It gets the text contents of an element, without having to strip HTML tags manually.
var el = document.createElement('div');
el.innerHTML = 'A<p>B<span>C</span>D</p>D';
el.textContent; // "ABCDD" (HTML tags stripped successfully)It sets the contents of an element to a bunch of plain text, without having to HTML-escape it.
var el = document.createElement('div');
el.textContent = 'A<p>B<span>C</span>D</p>D';
el.children.length; // 0 (plain text HTML-escaped successfully)
Sure, when you use them on elements, innerHTML
can be more powerful. But when you only care about the text content but not HTML content, textContent
is simpler and likely to have better performance.
So we have both of them, and choose the most appropriate for each case.
Related Topics
How to Create a ≪Style≫ Tag With JavaScript
Using Jquery to Center a Div on the Screen
When Is a Cdata Section Necessary Within a Script Tag
Get Element from Within an Iframe
Html5 Form Required Attribute. Set Custom Validation Message
Frame Buster Buster ... Buster Code Needed
Check If Checkbox Is Checked With Jquery
How to Append to Innerhtml Without Destroying Descendants' Event Listeners
Why Split the ≪Script≫ Tag When Writing It With Document.Write()
How to Load Up CSS Files Using JavaScript
How to Detect If JavaScript Is Disabled
How to Clear the Canvas For Redrawing
Console.Log of Element.Children Shows 0 Length But Has Three Entries When Expanded Later
Jquery Set Cursor Position in Text Area
Why Does My Http://Localhost Cors Origin Not Work
How to Programmatically Tell an HTML Select to Drop Down (For Example, Due to Mouseover)