InnerText vs. TextContent… What’s the Difference?

…What sets them apart and when should I use them?

By now, if you are anything like me, you have come across InnerText and TextContent somewhere in your coding journey. Also, if you are anything like me, you were left wondering what is different about the two and when should you be using either? In this post I will attempt to demystify the difference and hopefully leave you with a few ‘nuggets of knowledge’ to keep in your back pocket for the next encounter.

The Main Difference

To put it in the simplest terms possible:
textContent gets the content of all elements including things like <script> and <style>
innerText will only show the “human readable” elements (basically the text on the screen — and not the elements they belong too)

It should be noted that textContent & innerText also have an additional property that is inherit to it…

Both textContent and innerText remove child nodes when altered, but altering innerText in Internet Explorer (version 11 and below) also permanently destroys all descendant text nodes. It is impossible to insert the nodes again into any other element or into the same element after doing so.

Some Visual References

Ok, that is great and all…. but what does that mean and how can I tell them apart? To help answer that question, I created a simple todo list (I know, another todo list…) that I hope will help offer a clear visual between the two.

Let’s first start with the base code. Below will be a screen shot of the HTML for our ToDo list:

as you can see, we have a simple UL list with four list items nested inside, however we do have one of them ‘hidden’ so that it will not appear on the page after the DOM loads. If we were to open up the console in Chrome, we could set a variable for UL element using the getElementByID method (super handy method when working with the DOM- you can find more information about that here). It would end up looking something like this:

If we were to console.log that variable, we would not only get the UL element itself, but also any children associated with it. In our case, that would include the four list items we have on our ToDo list(even the hidden one).

Now that we have our variable set, let’s start exploring the differences between textContent and innerText.

TextContent

Using the console, let’s set the textContent to our variable and see what we get in the console…

It looks like we got the ToDo list and all of the list items, including the fourth one which was “hidden”. Why is that?

This is because textContent will return every element in the node, regardless if they are hidden or not, as it does not regard any styling that may be associated within the node.

InnerText

Alrighty, now let’s do the same thing, but this time using the innerText property.

Well would you look at that? It seems as if this time, we only got back what is rendered on the screen! We can see the ToDo list with only three items this time… that fourth one is staying hidden for the time being.

The reason for this would be that innerText only returns the “human readable” elements. It will not contain any “hidden” elements as it is away of styling. In our case, we have the visibility of our fourth item styled to be hidden. We could leave it on the page forever, and anyone who visited our fabulous todo list would be non the wiser.

Final Thoughts…

Though the differences between these two properties are small, they are very specific. A simple way to remember them apart:

If you are wanting to see everything within a node, you should use textContent. This will give you everything and will ignore all styling and return “hidden” elements.

If you are wanting to edit and change what is currently seen on the page, then innerText is going to be the tool for the job. Since innerText is aware of and honors styling, you will always be working with the elements that the end users see.