InnerHTML and textContent: Tools for Dynamic Web Content in JavaScript

Photo by Nubelson Fernandes on Unsplash

Of late I’ve been learning a lot about JavaScript and DOM manipulations and one particularly interesting thing I’ve come to discover is the various ways to manipulate the content that users see on a web page using JavaScript.

This is often carried out using DOM (Document Object Model) manipulations and for this to happen, there are three popular ways to go about it. These are through the use of innerHTML, innerText, and textContent, but in this article, we’ll be restricting the discussion to just innerHTML and textContent.

Both innerHTML and textContent are JavaScript properties used in DOM manipulations — the act of dynamically changing HTML content using JavaScript — to add, remove, or modify the elements of a website.

Both properties perform similar roles, but each one goes about the job differently, and understanding how each tool works can go a long way in determining which one is most suitable for a given occasion.

innerHTML

innerHTML is used to get the non-rendered text content of a page including HTML tags and attributes. This allows for more elaborate customization since it lets you add, remove, or modify HTML elements and attributes inside the content of an element.

Below is an illustration

<div id = "test"> 
  <p>Check out <a href=#>my page</a>    for more content</p> 
</div>

Here is the JavaScript DOM Manipulation

var testing = document.getElementById("test");
var output = testing.innerHTML;
console.log(output);

And here is the final output

Photo by Chinazaekpere Uchenna

Although innerHTML is supported by all browsers and therefore has cross-browser compatibility, it is advisable to only use it when you want to see the HTML markup and what is contained within an element, including inner element tags like <p>, <span>, <bold>, etc., line breaks, spacing, and formatting.

This is because the incorrect usage of innerHTML can leave your page susceptible to dangerous attacks, therefore it is not recommended to use innerHTML, especially in cases where you only need the text content of an element.

textContent

textContent is a secure method for managing plain text content and significantly reduces the risk of introducing security vulnerabilities. It comes in handy when you want to see the text content of an element along with spacing but without the HTML tags and attributes.

Below is an illustration

<div id = "test"> 
  <p>Check out <a href=#>my page</a>    for more content</p> 
</div>

Here is the JavaScript DOM Manipulation

var testing = document.getElementById("test");
var output = testing.textContent;
console.log(output);

And here is the final output

Photo by Chinazaekpere Uchenna

However, textContent can only handle plain text as it doesn’t support the inclusion of HTML elements or attributes. Instead, it simply enables you to access or set an element’s text content

Conclusion

Both of these JavaScript properties are useful in various situations. InnerHTML is ideal for when you need to make intricate changes to the HTML structure, whereas textContent comes to the fore when you want to modify the visible text without altering the underlying HTML.

Remember that the choice between innerHTML and textContent should be guided by the specific needs of your project, and it’s crucial to exercise caution, especially with innerHTML, as improper use can pose security risks.