The Difference Between textContent, innerText and innerHTML in JavaScript

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;

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

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.

    <div id='inner'>
      <button id='btn'>Click here</button>
    </div>

Let's apply textContent on the above HTML markup.

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.

<div id='outer'>
    <div id='inner'>
      <button id='btn'>Click here</button>
    </div>
</div>

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.

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

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

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.

    <div id='inner'>
      <button id='btn'>Click here</button>
    </div>

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.

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

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
freeCodeCamp
w3schools