InnerText vs. textContent vs. innerHTML : Which one should you use?
Published: 2023-04-01 19:23:40

Whether you are a beginner or an advanced programmer, you have surely come across the innerText, textContent, and innerHTML properties. Each property can help you change and manipulate your code. But how do you know which to use when they all perform similar operations? 

## **Let's break it down:**

---


**InnerText** will show only "human-readable" text. It will not return any styling or hidden elements.

**TextContent** returns any and all node elements.

**InnerHTML** allows you to grab the _text within the string_ of the HTML markup, including any styling or script tags.

---
If that still sounds like they are basically doing the same thing, you wouldn't be wrong! They do perform similarly but have subtle differences.

Let's start out with making a simple <code>div</code> HTML tag and adding some content: 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4otlczp04b47ulzfe7e.png)

We have some text and some styling included. The <code>strong</code> tag will bold the word "are", and the <code>em</code> tag will italicize "differences." We also included 3 spaces between the words "the" and "differences."
Now, let's create a variable in JavaScript so that we can grab the content of our <code>div</code>.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovttgupsdnxdm54a1qyn.png)



## Using innerText:

Recall from above that innerText will return text that is "human-readable". 

<u>Result:</u>



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnbuuyim8y14e0w5njga.png)

The output of <code>getInfo</code> is all of the _text_. Notice how neither of the tags or the spacing shows up when we call <code>getInfo.value</code>.

You should use innerText when you just need to grab THE TEXT without the styling tags or other formatting (the random spaces, for example). Think of innerText as only, *you guessed it*, the inner text. 

**Side note:** innerText is not supported in Internet Explorer 9 or earlier versions. Because innerText is aware of CSS styling, it also can decrease performance by triggering a reflow. A reflow is when a browser reevaluates page elements when a document is re-rendered. An example of a reflow would be when a browser window is resized. 

---

## Using textContent

TextContent will grab all of the text and return any styling or script tags and any other formatting.

<u>Result:</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1m7jm9i1h39claclaa7.png)

Notice how textContent grabbed all of the text and the styling, including the spaces. If you want to see what is in the element, then you should use textContent. 

**Side note:** textContent will perform better than innerText because it does not trigger a reflow since it is not aware of CSS styling. Also, because its value is not parsed as HTML, textContent can help prevent malicious attacks.

---

## Using innerHTML:

InnerHTML will return all of the text, styling tags included, as it is typed in the HTML document. 

<u>Result:</u>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w6hi1ofytfrkjjkh8ae.png)

What that means is that innerHTML does not change anything, it just returns all of the text as it is in the HTML document.

**Side note:** using innerHTML should be few and far between because it can be a target for malicious code to be inputted.  As long as you are using your own code and not code from any third party, you should be fine using innerHTML, however, try opting for textContent instead.

---

## Why would I need to use any of these?

---
There are a multitude of reasons to use innerText, textContent, or sometimes innerHTML.
As you can see, innerText, textContent, and innerHTML all do very similar things. They all grab the text within the element, but there are slight differences. To recap, innerText will grab strictly the inner text, which means it will grab all of the text that is "normal" to humans. A styling tag such as <code>strong</code> is not normal text to humans, and it will not show up when using innerText. TextContent will also grab all of the text and whatever styling you put in there. The styling tags will not show as text, but will be executed. Finally, innerHTML will grab everything and return it as it is, styling tags and weird spaces and all. But beware of the safety implications when using innerHTML, and try to avoid using it.

---


header photo source: https://www.goodcore.co.uk/blog/coding-vs-programming/