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

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

developertharun profile image Tharun Shiv ・2 min read

The Complete JavaScript DOM (6 Part Series)

1) JavaScript DOM - Part 1 - What is it and what can we do with it? [video + article] 2) JavaScript DOM - Part 2 - The Document and Window Object [video + article] 3 ... 4 3) JavaScript DOM - Part 3 - Get Element By ID [video + article] 4) JavaScript DOM - Part 4 - innerHTML vs innerText vs textContent [video + article] 5) JavaScript DOM - Part 5 - Get Elements By ClassName [video + article] 6) JavaScript DOM - Part 7 - Query Selectors - Power to Grab anything [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

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?

"

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,

[deleted user] image

[Deleted User]

The Complete JavaScript DOM (6 Part Series)

1) JavaScript DOM - Part 1 - What is it and what can we do with it? [video + article] 2) JavaScript DOM - Part 2 - The Document and Window Object [video + article] 3 ... 4 3) JavaScript DOM - Part 3 - Get Element By ID [video + article] 4) JavaScript DOM - Part 4 - innerHTML vs innerText vs textContent [video + article] 5) JavaScript DOM - Part 5 - Get Elements By ClassName [video + article] 6) JavaScript DOM - Part 7 - Query Selectors - Power to Grab anything [video + article]

Posted on May 18 by:

developertharun profile

Tharun Shiv

@developertharun

Web Developer | DevOps Engineer | Programmer | Course Instructor

Discussion

markdown guide
 

These differences were always confusing. Good article. Now I get it. πŸ‘

 

thank you, glad it helped

 
 

Good series.. Looking forward for more

 

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