Javascript: What is the Difference Between textContent, innerText, and innerHtml?

If you’re a web developer, chances are you’ve used or at least heard of JavaScript, one of the most popular programming languages for creating interactive and dynamic websites. When it comes to manipulating the content of a web page, JavaScript offers several options, such as textContent, innerText, and innerHtml. At first glance, they may seem similar, but they actually have important differences in how they work and how they affect the content of the page. In this article, we’ll explore these differences and understand when and how to use each of them.

textContent: The textContent property in JavaScript refers to the plain text content of an HTML element. This means that it only gets or sets the text without any HTML tags or any additional formatting. For example, if you have a paragraph element <p> with the following HTML code:

<p id="myParagraph">This is a paragraph <strong>with bold text</strong> and <em>italic text</em></p>

And you want to access the text content of the paragraph using textContent in JavaScript, the result would be

const myParagraph = document.getElementById('myParagraph');
console.log(myParagraph.textContent);
// Output: "This is a paragraph with bold text and italic text"

As you can see, textContent returns the entire text content inside the element, including any HTML tags.

innerText: The innerText property in JavaScript also refers to the text content of an HTML element, but with some important differences compared to textContent. innerText takes into account the element’s visibility on the page and applies CSS styles, which means that you will only get the text visible to the user. For example, if you have a paragraph element <p> with the following HTML code:

<p id="myParagraph">This is a paragraph <strong style="display:none;">hidden</strong> and <em>italic text</em></p>

And you want to access the text content of the paragraph using innerText in JavaScript, the result would be

const myParagraph = document.getElementById('myParagraph');
console.log(myParagraph.innerText);
// Output: "This is a paragraph and italic text"

As you can see, innerText does not include hidden text by CSS styles, such as the text inside the <strong> element with the “display:none;” style in this case.

innerHTML: The innerHTML property in JavaScript refers to the entire HTML content of an element, including both the text and HTML tags inside the element. For example, if you have the same paragraph element <p> from the previous example and you want to access its HTML content using innerHTML in JavaScript, the result would be:

const myParagraph = document.getElementById('myParagraph');
console.log(myParagraph.innerHTML);
// Output: "This is a paragraph <strong style="display:none;">hidden</strong> and <em>italic text</em>"

As you can see, innerHTML returns the entire HTML content of the element, including its structure and styles.

It’s important to note that innerText and innerHTML can have security implications, as they allow manipulation of HTML content and can potentially open the door to XSS (Cross-Site Scripting) attacks if not handled properly.

In conclusion: textContent, innerText, and innerHTML are JavaScript properties used to access and manipulate the content of an HTML element in a web page. Each one has its own behavior and purpose.

textContent returns the plain text content of the element without considering any HTML tags or CSS styles. It’s useful when only the text without any additional formatting is needed.

innerText, on the other hand, takes.