What you need to know about innerHTML and JavaScript?

In this article, you will get to know the innerHTML property of the HTML DOM and how is connected to JavaScript.

So, what is JavaScript innerHTML?

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.
Before we get any further, let’s emphasize that a Document Object Model (DOM) is defined by the browser when a browser loads a page. Therefore, the DOM presents a series of objects displayed on the web page. The beauty of DOM is that you don’t have to change the HTML code if you want to change an element on a web page. What you need to do is use the DOM and JavaScript if you want to apply changes to how the web page appears in a particular session.
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:

• Home
• Articles
• Contact

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.
In the next step, we will create a new
• 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:

  page.appendChild(li);

  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
    element will contain the initial content and the dynamic content that we created by JavaScript. So, the innerHTML property will return the updated HTML source of the document, including all the changes that have been made since the page was loaded. Thus, the output will be:

    Home
    Articles
    Contact
    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.