post logo icon of a cv file download
avatar logo

innerText vs textContent in 2023

Javascript HTML Inner text Text content

What do I need to use? innerText or textContent? Here we are going to analyze 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>
var containerDiv = document.querySelector('#container');
var textNode = document.createTextNode('text');


  1. It is used to get the rendered text of an element.
  2. Does not include hidden elements like styles or scripts. Requires layout to calculate the result.
  3. Not available for text nodes, only for HTMLElement objects.
  4. Evaluates breaking lines tags. <br> -> \n
  5. No spaces will be concatenated.
  6. More performance-heavy. Take it wisely. In general, users won’t notice the difference.
  7. 98.61% supported. Can I use
// result:
// Paragraph with line
// break and bold style.

// result:
// undefined


  1. It represents the full-text content of an element and its descendants.
  2. Includes hidden elements like styles or scripts.
  3. Available for all Node objects.
  4. Evaluates control characters like \n.
  5. Can prevent XSS attacks. More info in this dom spec.
  6. 98.91% supported. Can I use. Be careful with IE 6-8.
// result:
// p {
//   font-weight: bold;
// }
// Paragraph with line break, spaces and bold style.
// console.log('this is a script tag');

// result:
// word1
// word2

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
// result:

// textContent
// result:
// text uppercase


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>
var setterDiv = document.querySelector('#setter');

// result:
// span {font-weight: bold;} basic text

setterDiv.textContent = 'some other text';
// result:
// some other text

As you can see, we lose all nodes inside the container.


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.

a happy mandalorian

Thanks for reading, and I hope you’ve learnt something new.

More recent posts here!