Javascript innerText vs. innerHTML vs. textContent

One of the beauties of using Javascript is its’ flexibility: you can use so many different techniques and approaches to accomplish the same task. Of course, it’s flexibility has its drawbacks as well. As a Javascript novice, I am tending to see very similar methods that practically do the same thing in some contexts, but something different in other contexts. The first example that comes to mind is the use of Javascript’s innerText, innerHTML, and textContent methods. With my brief experience with Javascript so far, I have been able to use the first two practically interchangeably, though I am yet to mess around much with textContent. They couldn’t have made three different methods to do the exact same thing, so that got me wondering, what really is the difference between the three? In this blog post we’re going to take a deeper look into what sets them apart.

Let’s use an example to put them into practice. Let’s say we have an index.html file that contains a form that looks likes this:

If we take a closer look at this code, we can see that within the form are other HTML elements, such as buttons, divs, and labels and input fields within the divs. These HTML nodes have attributes such as names, classes, id’s and placeholders. There’s a lot of personality in this thing!

Let’s go ahead and grab the form using a query selector to grab it by it’s id: “new-quote-form”

Now, we can go ahead and console.log form.innerText, form.innerHTML, and form.textContent to see the differences in the console in our browser. First, let’s take a look at what form.innerText prints for us:

What!? How could that be? All of that code within our form and all that is returned with form.innerText is the plain text within the code! The HTML elements and code are ignored or decoded all that is returned is the text within the code.

Next, we’ll take a look at our console.log of form.innerHTML:

Hm… this looks much different from our last console.log! With form.innerHTML, we’re shown the plain text within the code as well as the HTML code that surrounds it. That includes all of the other elements and their attributes that we saw when we looked at the original HTML code! In fact, this console log is identical to the code we saw within the form when we looked at the original code! We can see that innerHTML is a little more informative than innerText in this regard. So clearly there is a pretty big difference between these two methods! Lastly, let’s take a look at the console.log for form.textContent:

Hm… pretty odd. This looks very similar to what we saw when we used innerText, but with much more spacing. What gives? After digging deeper in the MDN documentation, there seem to be some significant differences. textContent gets the content of all elements, including tags like <script> and <style>. On the other hand innerText will only show the “human-readable” elements. So in this case, just the plain text.

Another significant difference is that innerText is computationally more expensive. This is because innerText takes the CSS styling into account, forcing a reflow of the page to make sure all styles are up to date. It’s worth noting that MDN says reflows should be avoided as much as possible.

A third difference that is more interesting than practical (due to the obsolescence of Internet Explorer), is that altering innerText in Internet Explorer (version 11 or lower) removes child nodes from the element 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. This makes me think that using innerText is dangerous!

Now that we’ve taken a brief look at all three of these methods, it raises the question: when should I use innerText, innerHTML, or textContent?

One of the disadvantages of using innerHTML is its security hazards. Apparently, using it can lead to cross-site security attacks. So if you are simply looking to add text, you should avoid innerHTML and use textContent instead as it is more secure.

Like we said earlier, using innerText can be expensive for your computer, as it requires some layout system information and can be relatively slow to load. Also, you can’t insert any HTML code using innerText!

So, if you need to add simple text to your HTML nodes, it is best to use textContent because it is light to use and is the most secure because it doesn’t parse the HTML like innerHTML does. It seems that best practice is to use the trusty method of grabbing, creating, and appending elements and using textContent when you need to add some text. I hope this blog post was helpful in understanding the differences between these three methods and you have some context to know when to use which!