InnerText vs. InnerHTML vs. TextContent: What’s Best?

When you’re getting or setting an element in JavaScript, you have a lot of options — many of which seem exactly the same.

In this post, I’ll break down the subtle differences between innerHTML, innerText and textContent when you’re manipulating your JavaScript code.

Let’s start with some sample HTML code that I’ll use to demonstrate how each property works.

<div id='blog test'>
   
This element is <strong>strong</strong> and     has some super fun <code>code</code>!
</div>

As you can see in the code above, we’re including some HTML to make the word strong (bold) and make the word code appear monospaced. The browser would render the code like this:

Let’s say we’re creating a variable getValue and set it equal to our div.

const getValue = document.getElementById('blog-test');

Now, I’ll explain what you get when you call innerHTML, innerText  and textContent on that getValue variable.

What Is InnerHTML in JavaScript?

getValue.innerHTML

// =>   This element is <strong>strong</strong> and     has some super fun <code>code</code>!

What Does InnerHTML Return?

InnerHTML returns the string inside our div and the HTML (or XML) markup contained within our string, including any spacing, line breaks and formatting irregularities.

When to use InnerHTML

You should use innerHTML when you want to see the HTML markup and what exactly is in your element — including any spacing, line breaks and formatting irregularities.

InnerHTML Additional Notes

If the text inside the element includes the characters &, <, or >, innerHTML will return these characters as HTML entities “&”, “<” and “>”.

More on JavaScriptHow to Pick Between a For Loop and While Loop

What Is InnerText in JavaScript?

getValue.innerText

// =>   This element is strong and has some super fun code!

What InnerText Returns

InnerText returns the string inside our div. It approximates the “rendered” text content of a node and is aware of styling and CSS.

Think of it this way: If a user highlighted the contents of an element on their screen and copied it to their clipboard, what you get with innerText is exactly what it would return.

When to use InnerText

You should use innerText when you only need to see what’s in the element without the formatting.

InnerText Additional Notes

When using innerText it retrieves and sets the content of the tag as plain text. Whereas when you use innerHTML, it retrieves and sets the same content in HTML format.

What Is TextContent in JavaScript?

getValue.textContent

// =>   This element is strong and     has some super fun code!

What TextContent Returns

TextContent returns the content of all elements in the node, including script and style elements. It’s aware of formatting like spacing and line breaks and will return those, as well.

When to Use TextContent

You should use textContent you want to see what’s in the element, plus any styling.

TextContent Additional Notes

While innerText is very similar to textContent, there are important differences between them. Put simply, innerText is aware of the rendered appearance of text while textContent is not.

Level Up Your Skills4 Ways to Help Software Developers Build Their Skills

InnerText vs. InnerHTML vs. TextContent

Let’s revisit our original code.

<div id='blog test'>
   
This element is <strong>strong</strong> and     has some super fun <code>code</code>!

</div>

const getValue = document.getElementById('blog-test');

Here’s what innerHTML, innerText and textContent return:

getValue.innerHTML

This element is <strong>strong</strong> and has    some super fun <code>code</code>!



getValue.innerText

This element is strong and has some super fun code!

getValue.textContent

This element is strong and     has some super fun code!

As you can see, there are some key differences between the three that we covered in this post.

In addition, you should also be aware that there are different safety implications of using each property — especially innerHTML. For example, though innerHTML is often used to insert text or styling, it can also be used to insert script tags that execute JavaScript. While HTML5 blocks any script tag inserted via innerHTML from executing, there are other ways to execute JavaScript that don’t involve script.

So be on the look out when using innerHTML, as malicious attacks could target any place in your code that uses innerHTML to set or update an element.