Forem

Cover image for JavaScript DOM - Part 4 - innerHTML vs innerText vs textContent [video + article]
Tharun Shiv
Tharun Shiv

Posted on • Edited on

17 5

Textcontent vs Innerhtml 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

You can read Part 3 here:

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
Enter fullscreen mode Exit fullscreen mode

example:

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

output

"
Hello this is Tharun How are you?
"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

example:

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

output

"
  <br>
  Hello this is <span>Tharun<span/> How are you?
  <br>
"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

example:

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

output

"

  Hello this is Tharun How are you?

"
Enter fullscreen mode Exit fullscreen mode

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 coming tomorrow, where we discuss about how you can get multiple elements by using getElementsByClassName.

Thank you for reading 😊

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

Written by,

Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

Tharun Shiv

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (7)

Collapse
 
venkat121998 profile image
venkat anirudh

These differences were always confusing. Good article. Now I get it. 👍

Collapse
 
developertharun profile image
Tharun Shiv

thank you, glad it helped

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

Yeah, same here

Collapse
 
developertharun profile image
Tharun Shiv

thank you, glad it helped

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

Good series.. Looking forward for more

Collapse
 
developertharun profile image
Tharun Shiv

Sure, 10 more parts to the series, then we move on to the project 😊

Collapse
 
digvijaysingh21 profile image
digvijaysingh21

please add here only 6 are here

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay