Deep Tech Point
first stop in your tech adventure
What you need to know about innerHTML and JavaScript?
January 21, 2022 | 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:

With the following example, we will apply the innerHTML property to read all contents that are located in the