What’s Best: innerText vs. innerHTML vs. textContent

Breaking down the subtle differences for when you’re manipulating JavaScript code

Annie Mester
Jul 25, 2019 · 3 min read
Image for post
Image for post
Photo by Artem Sapegin on Unsplash

When you’re getting or setting an element in JavaScript, you have many options — many seemingly exactly the same.

In this post, I 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 this code like this:

What the above code snippet renders in the browser.

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 innerText, innerHTML, and textContent on that getValue variable.

.innerHTML

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

What it returns

The string inside our <div> and the HTML (or XML) markup contained within our string, including any spacing, line breaks, etc.

When to use it

When you want to see the HTML markup and what exactly is in our element — including any spacing, line break, and formatting irregulars.

Additional notes

If the text inside the element includes the characters &, <, or >, innerHTML will return these characters as HTML entities &amp;, &lt;, and &gt;.

.innerText

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

What it returns

The string inside our <div>. It approximates the “rendered” text content of a node — it’s 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 it

When you only need to see what’s in the element — with zero formatting.

Additional notes

innerText retrieves and sets the content of the tag as plain text, where innerHTML retrieves and sets the same content in HTML format.

.textContent

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

What it 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.

When to use it

When you want to see what’s in the element, plus any styling on it.

Additional notes

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

Side by Side by Side Comparison

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.innerHTMLThis 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.textContentThis 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.

One important key difference that isn’t covered here are the safety implications of using each property — learn more about that here.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store