What is the difference between .textContent, .innerText, and .innerHTML?
nadia4206
Posted on December 22, 2022
Hi! My name is Nadia and I'm currently a student enrolled in the Software Engineering program at Flatiron School.
I just started a few weeks ago and it's been a whirlwind! So much information to digest!
One thing I've noticed is that there are so many different ways to accomplish one goal.
For example, to "set" or "retrieve" the text content of an element, you can use either .textContent
, .innerText
, or .innerHTML
.
Builtin.com has a great article that breaks down the differences:
- "
.innerHTML
allows you to see exactly what is in the HTML markup contained within a string."
What this means is that when you call .innerHTML
it will return the string and any HTML markup contained within the string.
"
.innerText
approximates the 'rendered' text content of a node and is aware of styling and CSS.""
.textContent
retrieves and sets the content of the tag as plain text."
At first glance, it seems like .innerText
and .textContent
are exactly the same. The author of this article goes on to explain that the difference is that .innerText
is aware of the rendered appearance while .textContent
is not.
What you'll want to use depends on what you want to be able to see!
Referenced Article: https://builtin.com/software-engineering-perspectives/innerhtml-vs-innertext
Posted on December 22, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 30, 2024
November 30, 2024