Ismael Ramos 🚀

Posted on Feb 7, 2023 • Edited on Jun 29, 2023 • Originally published at ismaelramos.dev

innerText vs textContent in 2023

#javascript #webdev #beginners #programming

Table of content

The basics
innerText
textContent
Other differences
- Text-transform property
- Setter
Conclusion

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.