innerText vs textContent in 2023
Tags: javascript, webdev, beginners, programming
Published: 2023-02-07 12:00:00

**Table of content**
- [The basics](#the-basics)
- [innerText](#innertext)
- [textContent](#textcontent)
- [Other differences](#other-differences)
  * [Text-transform property](#texttransform-property)
  * [Setter](#setter)
- [Conclusion](#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](https://stackblitz.com/edit/innertext-vs-textcontent?devToolsHeight=33&file=index.html,index.js)**.

## The basics

Giving this HTML:

```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>
```

```javascript
var containerDiv = document.querySelector('#container');
var textNode = document.createTextNode('text');
```

## innerText

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. &lt;br&gt; -> \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](https://caniuse.com/innertext) 

```javascript
console.log(containerDiv.innerText);
// result:
// Paragraph with line
// break and bold style.

console.log(textNode.innerText);
// result:
// undefined
```

## textContent

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](https://dom.spec.whatwg.org/#dom-node-textcontent).
6. 98.91% supported. [Can I use](https://caniuse.com/textcontent). Be careful with IE 6-8.

```javascript
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:

```html
<div id="transform" style="text-transform: uppercase;">text uppercase</div>
```

```javascript
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.

```html
<p id="setter">
  <style>span {font-weight: bold;}</style> basic <span>text</span>
</p>
```

```javascript
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.

![a happy mandalorian](https://res.cloudinary.com/ismaestro/image/upload/v1675717892/ismaelramos/posts/inner-text-vs-text-content-in-2023/mandalorian_hebvqr.webp)

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!