innerText vs innerHtml vs textContent || Difference & When to use each best!
Published: 2023-02-04 13:33:40

In Javascript, there are three properties that can be used to set or return an HTML element's content in the **DOM**: _innerHTML_, _innerTEXT_, and _textCONTENT_.

Before we dive straight in, let's take a step back for a second;
Have you heard about **DOM** manipulation? Let’s see, what is the **DOM** you might be thinking?

**'Document Object Model'** (DOM) is a programming interface for HTML. Simply you can say, the structure of your HTML document. The DOM is a tree-like representation of the contents of a webpage using nodes instead of elements. These nodes represent HTML elements, and they can be manipulated and re-rendered. The DOM is hierarchical, following a logical
tree-like structure, where child nodes are contained in parent nodes.


![DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ji7tcy1asqs2irqojwzt.png)

You will see three properties while working on the **DOM** i.e _innerText_, _innerHtml_, _textContent_. You’ll need to know how to change the text or the HTML that appears on the page to make your sites more interactive. All _innerText_, _innerHTML_ and _textContent_ properties let you access and change the contents of a tag. That’s where the _innerText_, _innerHTML_ and _textContent_ HTML attributes comes in. People sometimes get confused about these three properties. It’s time to clear all the confusion and get to know where to use these properties specifically.

Having said that, and clarifying to an extent what the **DOM** is, let's dive straight right into the business of the day!

```
<a class="button" id="btn" href="#">ONLINE APPLY <span style="display: none">HERE</span> </a>
```
_Above is the **HTML block of code** that we will use for example_



## **innerHTML**
The JavaScript _innerHtml_ property sets the HTML contents of an element on a web page. _innerHtml_ is a property of the HTML DOM and is often used to set and modify the contents of an **<p>** element. _innerHtml_ returns the content of an element and any spacing and descendants. **_innerHtml_** returns all text, including HTML tags, that is contained by an element.

```
const btn = document.querySelector('.button') btn.addEventListener('click', function (e) { console.log(e.target.innerHTML)
```
Above is the Javascript code for **_innerHtml_**

`ONLINE APPLY <span style="display: none">HERE</span>`: 
Javascript output for **_innerHtml_**

Hence, the **_innerHTML_** property sets and returns the content of an element with new HTML content.

**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 “**&amp;**”, “**&lt;**” and “**&gt;**”.

## **innerTEXT**
The JavaScript _innerText_ property sets the text content of an element that is visible on a web page are accessed. The hidden content cannot be retrieved. It also sets the contents of its descendants. _innerText_ returns the text without any descendants or spacing. You would use _innerText_ if you want to see the contents of an element in plain text. **_innerText_** returns all text and tags contained by an element and all its child elements.
```
btn.addEventListener('click', function (e) { console.log(e.target.innerText) })
```
Above is the Javascript code for **_innerText_**
`ONLINE APPLY`: Javascript output for **_innerText_**

Hence, the **_innerText_** property returns the content of all elements, except for `script` and `style` elements.

**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.

## **textCONTENT**
In _textContent_, all the text including the hidden contents can be accessed. _textContent_ is all text contained by an element and all its children that are for formatting purposes only.
```
btn.addEventListener('click', function (e) { console.log(e.target.textContent) })
```
Above is the Javascript code for **_textContent_**

`ONLINE APPLY HERE`: Javascript output for **_textContent_**

Hence, The _textContent_ property returns the raw content with styling inside of all elements, but excludes the HTML element tags. This includes `script` and `style` elements, whitespace, line breaks, and carriage returns.

**WHEN TO USE textCONTENT?**
You should use _textContent_ when 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

**Summary:** Unlike _innerHTML_, _textContent_ has better performance because its value is not parsed as HTML. For that reason, using _textContent_ can also prevent **Cross-Site Scripting (XSS)** attacks. Unlike _innerText_, _textContent_ isn't aware of **CSS styling** and will not trigger a reflow. All Node objects have _textContent_, whereas **only** HTML Element objects have _innerText_.

If you found this useful, consider:

✅ Follow @vickyjhay for more content like this
✅ Follow me on Twitter where I share free resources on weekly basis!