Understanding HTML DOM Properties: innerHTML, innerText, and textContent

Posted by

In web development, manipulating HTML content dynamically is a common requirement. When it comes to updating the content of HTML elements via JavaScript, developers often have several options at their disposal, including innerHTML, innerText, and textContent. In this blog post, we’ll explore the differences between these three HTML DOM properties and when to use each one.

Key Differences


The innerHTML property is used to set or get the HTML content (including markup) of an element. When setting innerHTML, the browser parses the string as HTML and updates the element’s content accordingly.


<div id="example"></div>


document.getElementById("example").innerHTML = "<p>Hello, <strong>Roshan!</strong></p>";

the div’s innerHTML is set to a paragraph element containing the text “Hello, Roshan!” with the word “Roshan” bolded.


The innerText property, on the other hand, sets or returns the text content of the specified element, and unlike innerHTML, it does not interpret HTML tags. It represents only the visible text content of the element, excluding any HTML markup.

document.getElementById("example").innerText = "Hello, Roshan!";

This will set the inner text of the div element to “Hello, Roshan!”, without any HTML markup.


Similar to innerText, the textContent property sets or returns the text content of the specified element. However, unlike innerText, textContent includes all text within the element, including any nested HTML elements.

document.getElementById("example").textContent = "Hello, <strong>Roshan!</strong>";

the textContent property will set the text content of the div element to “Hello, <strong>Roshan!</strong>”, including the HTML tags.

Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x