Table of content
What do I need to use? innerText or textContent? Here Iยดm going to analyse the differences
between both, and some hidden abilities that you may not know.
The code is available in this stackblitz.
The basics
Giving this HTML:
<div id="container">
<span style="display: none">HIDDEN SECTION</span>
<p><style>p { font-weight: bold}</style> Paragraph with line <br>break, spaces and bold style.</p>
<script>console.log('this is a script tag')</script>
</div>
var containerDiv = document.querySelector('#container');
var textNode = document.createTextNode('text');
innerText
- It is used to get the rendered text of an element.
- Does not include hidden elements like styles or scripts. Requires layout to calculate the result.
- Not available for text nodes, only for HTMLElement objects.
- Evaluates breaking lines tags. <br> -> \n
- No spaces will be concatenated.
- More performance-heavy. Take it wisely. In general, users won't notice the difference.
- 98.61% supported. Can I use
console.log(containerDiv.innerText);
// result:
// Paragraph with line
// break and bold style.
console.log(textNode.innerText);
// result:
// undefined
textContent
- It represents the full-text content of an element and its descendants.
- Includes hidden elements like styles or scripts.
- Available for all Node objects.
- Evaluates control characters like \n.
- Can prevent XSS attacks. More info in this dom spec.
- 98.91% supported. Can I use. Be careful with IE 6-8.
console.log(containerDiv.textContent);
// result:
//
// HIDDEN SECTION
//
//
// p {
// font-weight: bold;
// }
//
// Paragraph with line break, spaces and bold style.
//
//
// console.log('this is a script tag');
//
console.log(textNode.textContent);
// result:
// word1
// word2
Other differences
Text-transform property
In this case, we are going to use text-transform and this is what happens:
<div id="transform" style="text-transform: uppercase;">text uppercase</div>
var transformDiv = document.querySelector('#transform');
// innerText
console.log(transformDiv.innerText);
// result:
// TEXT UPPERCASE
// textContent
console.log(transformDiv.textContent);
// result:
// text uppercase
Setter
And what happens if we set textContent to some random text? You will lose all children nodes!
In fact, this is a very simple and fast way to delete them.
<p id="setter">
<style>span {font-weight: bold;}</style> basic <span>text</span>
</p>
var setterDiv = document.querySelector('#setter');
console.log(setterDiv.textContent);
// result:
// span {font-weight: bold;} basic text
setterDiv.textContent = 'some other text';
console.log(setterDiv.textContent);
// result:
// some other text
As you can see, we lose all nodes inside the container.
Conclusion
So if you are trying to simply get the text from an element you can use innerText.
Consider also the use of innerHTML, which lets you work with HTML rich text and doesn't automatically encode and decode text, depending on what are your needs. Otherwise, textContent is the way.
I hope you have learned something new. If you think this might help other people, please hit the like button so that others can read it. โค๏ธ
If you have any thoughts or questions, feel free to leave a comment!
Top comments (4)
Learning about innerText a while ago was a game changer for me. It's great that you shared this article!
:) nice to hear that! Thanks for the comment!
Very Nice
Thanks!