The Difference Between textContent, innerText and innerHTML in JavaScript
Published: 2023-12-13 14:00:35

In JavaScript Document Object Model(DOM) manipulation, we can use the `textContent`
, `innerText`, and `innerHTML` properties to read the text, and we can also use them to update/set the text of an element.

In this blog post, you will learn about how these properties are used to read and update the text of an HTML element.

Let's start!

## What is `textContext` property in JavaScript DOM manipulation

`textContent` is a JavaScript DOM property that displays only the text inside of an HTML tag. Thus, it ignores all HTML tags and returns only the text inside the tags.

Let's see an example using the below HTML markup;

```HTML
  <div id="mylinks">
        This is my <b>text content</b>:
        <ul>
          <li><a href="www.sam.com">Hello <b>friend</b> </a></li>
          <li><a href="www.myblogs.com">Welcome to my <b>blogs page</b></a></li>
        </ul>
      </div>
```

Using the `textContent` property, let's see what the `textContent` property will print to the console when we apply it to the above HTML markup.


```JavaScript
let divEl = document.getElementById('mylinks').textContent
console.log(divEl)
```
Below is what the `textContent` property will print to the console.

```
 This is my text content:
        
          Hello friend 
          Welcome to my blog page
```
Let us see another example with the `textContent` property. 
```JavaScript
    <div id='inner'>
      <button id='btn'>Click here</button>
    </div>
```
Let's apply textContent on the above HTML markup.
```JavaScript
let divEl = document.getElementById('inner').textContent
console.log(divEl)
```
Below is what the `textContent` property for the above HTML markup will print to the console.
```
     Click here
```
Thus, `textContent` will return the texts inside the targeted element. It is important to note, however, that the `textContent` property does not take into account CSS properties and style applied to an element.

## How to set the text of an HTML element using `textContent`

Let's see how we can use `textContent` to set the text of the below HTML markup.
```JavaScript
<div id='outer'>
    <div id='inner'>
      <button id='btn'>Click here</button>
    </div>
</div>
```
```JavaScript
let divEl = document.getElementById('inner').textContent
console.log(divEl) // Click here

divEl = 'Submit me instead!'
console.log(divEl) // Submit me instead!
```


## What is the `innerText` property in JavaScript?

The `innerText` property takes into account "human-readable" elements. This property behaves like the `textContent` property except that the `innerText` property takes into account CSS properties and styling and won't return any text of "hidden" elements.

Let's see an example with the `innerText` property using the HTML markup below.
```JavaScript
<div>
  <h1>First display</h1>
  <h3>Second display</h3>
  <h3>Third display</h3>
  <h3 style="display: none">**Fourth display</h3>
</div>
```

```JavaScript
const divEl = document.querySelector('div').innerText
console.log(divEl)
```
The `innerText` property for the above HTML markup will print to the console the below text.

```
First display
Second display
Third display
```
*NB:* 
When you apply the `textContent` property on the same HTML markup above, it will also display the texts inside the last <h3> tag with the style of display set to none because the `textContent` unlike the `innerText` property does not take into account "hidden" elements. 

Try it out and see the result for yourself!

## How to set the text of an HTML element using `innerText`.
Let's see how we can use `innerText` to set the text of the below HTML markup.
```JavaScript
    <div id='inner'>
      <button id='btn'>Click here</button>
    </div>
```
```JavaScript
let divEl = document.getElementById('inner').innerText
console.log(divEl) // Click here

divEl = 'Submit me instead!'
console.log(divEl) // Submit me instead!
```

## What is `innerHTML` property in JavaScript DOM manipulation?

`innerHTML` just as textContent and innerText can also be used to read or update HTML elements.

To insert the HTML into a document rather than replace the contents of an element, use the method `insertAdjacentHTML()`.

**NB:** `innerHTML` will return the texts inside an HTML element together with their respective tags.

Using the HTML markup example below, we will see what the `innerHTML` property will return inside the console.

```JavaScript
<div>
  <h1>First display</h1>
  <h3>Second display</h3>
  <h3>Third display</h3>
  <h3 style="display: none">Fourth display</h3>
</div>
```

Let's see what the above HTML markup will return when we use `innerHTML` on it.

```JavaScript
const divEl = document.querySelector('div').innerHTML
console.log(divEl)
```
Below is what will be printed in the console as we apply `innerHTML` property to the code above.

```
 <h1>First display</h1>
      <h3>Second display</h3>
      <h3>Third display</h3>
      <h3 style="display: none">Fourth display</h3>
```
Thus, `innerHTML` will return all the texts of an element and their respective tags. 

**Conclusion**
In this blog article, we have seen that the three ways by which we can read or update the text of an HTML element are;

1. `textContent` is a JavaScript DOM property that displays only the text inside of an HTML tag. It does not take into account CSS properties and styling. It will return the text of hidden elements or elements with display set to none.

2. `innerText` property behaves like the `textContent` property except that the `innerText` property takes into account CSS properties and styling and will not return any text of "hidden" elements.

3. `innerHTML` just as `textContent` and `innerText` can also be used to read or update HTML elements.
`innerHTML` will return the texts inside an HTML element together with their respective tags.


**If you enjoy this blog post, please don't forget to like, comment and share.**

To read more, check [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
[freeCodeCamp](https://www.freecodecamp.org/news/innerhtml-vs-innertext-vs-textcontent/)
[w3schools](https://www.w3schools.com/jsref/prop_node_innertext.asp)