What is the difference between .textContent, .innerText, and .innerHTML?

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