In this section, we will learn what the Element innerHTML property is and how to use it in JavaScript.

What is Element innerHTML Property in JavaScript?

The JavaScript Element innerHTML property is used to get or set the HTML content of an element.

Note that we’re saying the “HTML content” of an element. That means if the target element should have a bunch of other HTML elements, we can simply use this property and add those HTML elements directly as the content of the target element.

For example, if you have an <ol> element and that needs 3 <li> items with a text content for each, we can easily write these items in a string value and assign it to the innerHTML property.

The browsers then interpret the string value and render the result accurately on the page.

Note: be careful when using this property, though! If this property takes its value from your audiences (users), then they might write some malicious codes and assign it to this property, which might lead to a break on your page or, even worse, the server! You can use the innerText property though if you want to take inputs from users and render it on the page without worrying about the potential exploitation!

Element innerHTML Property Syntax:

element.innerHTML;

element.innerHTML = “newValue”;

Element innerHTML Property Input Value

The value we set for this property is a string value that contains the HTML content that we want to set for the target HTML element.

Element innerHTML Property Return Value

The return value of this property is a string value that contains the HTML content of the target element.

Example: JavaScript set innerHTML

See the Pen JavaScript set innerHTML by Omid Dehghan (@odchan1) on CodePen.

Example: JavaScript body innerHTML

See the Pen JavaScript body innerHTML by Omid Dehghan (@odchan1) on CodePen.