/web development

JavaScript DOM - Part 4 - innerHTML vs innerText vs textContent [video + article]

This is going to be a multi-part Video + article tutorial series on JavaScript DOM. You’re reading Part 4

Read Part 3 here: https://www.tharunshiv.com/js-dom-3

Part 4 - Video

innerText | innerHTML | textContent

All three of them are attributes that you can get from the elements. They are not the same and we will be looking at how they are different with the below illustrations.

innerText

When applied to an element, it returns only the text which is inside the element, the text part wrapped by the element and nothing else, it also ignores the space.

syntax:

element.innerText;

example:

<p id="experiment">
  <br />
  Hello this is <span>Tharun</span> How are you?
  <br />
</p>
let p = document.getElementById('experiment');
console.log(p.innerText);

output

"
Hello this is Tharun How are you?
"

innerHTML

When applied to an element, it returns the text part enclosed by the element, along with the HTML tags inside, and also considers the spacing given inside. Look at the example below.

syntax:

element.innerHTML;

example:

<p id="experiment">
  <br />
  Hello this is <span>Tharun</span> How are you?
  <br />
</p>
let p = document.getElementById('experiment');
console.log(p.innerHTML);

output

"
  <br>
  Hello this is <span>Tharun<span/> How are you?
  <br>
"

textContent

When applied to an element, it returns the text part enclosed by the element and considers the spacing given inside. Look at the example below.

syntax:

element.textContent;

example:

<p id="experiment">
  <br />
  Hello this is <span>Tharun</span> How are you?
  <br />
</p>
let p = document.getElementById('experiment');
console.log(p.textContent);

output

"

  Hello this is Tharun How are you?

"

Follow my articles on Dev.to: https://dev.to/developertharun

So these are the main differences between these three that you need to know. You can access and do a lot more magic by grabbing the elements. We will explore and do stuff in this series.

Next Part: https://www.tharunshiv.com/js-dom-5

Thank you for reading 😊

Considering Subscribing to my YouTube Channel if you like the Video content: https://youtube.com/c/developerTharun

Written by Tharun Shiv

Subscribe to Tharun Shiv

Get the latest posts delivered right to your inbox

Tharun Shiv

Tharun Shiv

Devops Engineer Intern, PhonePe

Read More