The innerHTML is a property of the HTML DOM – it’s a property of the Element that enables you to get or set the HTML markup contained within the Element.
For example, the innerHTML is often used to set and modify the contents of an
element, or any other element, for that manner. In general, the innerHTML property allows you to set the HTML contents of any element on a web page, and that is the main purpose – we use it to write the dynamic HTML on the HTML document. We most often use the innerHTML property on the web pages to generate dynamic HTML such as registration or comment forms, links, and similar.
Let’s take a look at a simple example:
document.getElementById("paragraph").innerHTML = "Deep Tech Point";
This simple line of code sets the contents of the “paragraph”
element to “Deep Tech Point”. With the getElementById() method you can retrieve an element that is defined by its ID.
How do we read the innerHTML property of an element?
When you want to read the HTML markup of an element – the innerHTML of an element – the web browser serializes the HTML fragments of the element’s descendants. What you need to do when wanting to get the innnerHTML is to use the following syntax:
let content = element.innerHTML;
Let’s say you have the following markup on a webpage:
With the following example, we will apply the innerHTML property to read all contents that are located in the
- element and have a page ID.
let page = document.getElementById("page"); console.log(page.innerHTML);
Now, let’s take a look at how reading the contents works. First, you select the
- element – this is done with a help of an ID – in our case that ID is called “page”. We select the ID with the help of a getElementById() method, and then we fetch the HTML content of the
- element using the innerHTML. In this case, our output is:
Home Articles Contact
To sum up, when we want to read the innerHTML, the user agent will serialize the HTML or XML fragment that belongs to the element’s descendants. The HTML or XML fragment that will be returned will be based on the elements that are currently in the content of the element and will not match the original or initial page markup.
What if we want to update the HTML element?
Yes, we can do that and that is one of the advantages of using the innerHTML property.
So, first thing’s first. As already presented above, we need to fetch the
- element that has a “page” ID. We can do that by using the getElementById() method.
- element in the list – we will do that with a createElement() property, like so:
let li = document.createElement("li"); li.textContent = "Frequently Asked Questions";
At this point, we should take a quick peek at the textContent property in HTML. We use it to set the text content of a specific node, and this includes all the children of that node. The textContent property is very similar to the innerHTML property, however, there is a slight difference.
The textContent property is for formatting purposes only and represents all text, including all the children that are contained by a specific element – in the example above all
- elements. On the other hand, the innerHTML property will return all text, but that text will include all HTML tags, that are contained by an element.
In the following step, we will add that new
- element to the
- element with an appendChild() method:
And that’s it:
- we created a new
- element with a createElement() property,
- set the text with a textContent property
- and then added that new
- element to the
- element with an appendChild() method.
If we call the “page” with a console.log(page.innerHTML);, using the innerHTML property of the
- element, the contents of the
- Frequently Asked Questions
How do you replace the innerHTML property of an element?
When you want to set the value of innerHTML property, for example when you want to apply a setting that will replace the existing content of an element with the new content, you need to use the following syntax:
element.innerHTML = newHTML;
In this manner, you can remove everything that is located in the document, as a matter of fact, you can remove the entire document, simply by clearing contents of the document.body element, like so:
document.body.innerHTML = "";
Are there any security risk that are connected with replacing the innerHTML property?
As explained in the paragraph above, since you can set the value of inner HTML, it is also easy to replace the old contents of an element with content that is new. However, there is a potential security risk, because the string that is to be inserted could contain content that is possibly malicious.
Security is not a problem when you are the one who is inserting new data, however, when your website users are the ones who have control over new data, you should avoid the inner HTML property. Use the Element.SetHTML() property instead. This way you’re sanitizing the content before the content is inserted.
In the next step, we will create a new