How to append HTML code to a div using JavaScript?

As we all know that JavaScript is a scripting language that performs different actions on a website with the help of HTML. Although we use JavaScript hand-in-hand with HTML to make sure that it works properly, this thing makes the code complicated for the developer as if the person wants to add something to a div in HTML he has to go to the HTML code to add or update the changes. Now let’s think if there is any chance that the person doesn’t have to go to HTML code to append something in it and will do it by using JavaScript, wouldn’t it be more convenient?

In this write-up, we will tell you

• How to append HTML code to a div using JavaScript?
• How to append HTML code using innerHTML?
• How to append HTML code using insertAdjacentHTML?

How to append HTML code to a div using JavaScript?

In JavaScript, there are two ways to append HTML code to a div. These ways are as follows

• Append by using innerHTML
• Append by using insertAdjacentHTML

Let’s try to understand the above two methods of appending HTML to a div in JavaScript with proper examples and explanations.

How to append HTML code using innerHTML?

The innerHTML property is used to change the content inside a div or any HTML tag. It totally replaces the existing div content with the new content but to use this property a div must be assigned with a unique id and id should always be unique.

Code:

In this code, we create a simple HTML document having a heading tag and an empty div tag with a unique id check. Then we use JavaScript innerHTML property to append HTML code inside the empty div.

Output:

The output clearly shows that we append HTML <em> tag with some content and styling inside the empty div tag using innerHTML through JavaScript.

How to append by using insertAdjacentHTML?

In JavaScript, insertAdjacentHTML is another method that is used to append HTML code into a div through JavaScript. This method takes 2 arguments, The first argument specifies the position of the content in a div and the second argument is the actual HTML code that you want to append in a div.

This method uses four positions to append the HTML content in a div:

• beforebegin
• beforehand
• afterbegin
• afterend

Let’s go through all these positions one by one.

beforebegin
In the following code, this attribute will place the HTML code before the check id div.

Code:

In this code, we create a simple HTML document with <h1> tag and a <div> having unique id check. Inside this div a paragraph is written using <p>. Now we append HTML <h3> tag using insertAdjacentHTML method and use beforebegin position to append this HTML code on a specific position.

Output:

The output clearly shows that insertAdjacentHTML method appends HTML code before the targeted div because we use its beforebegin attribute to position our appended HTML code.

beforeend
In the following code, this attribute will place the HTML code inside the check id div but after the <p> tag.

Code:

In this code, we create a simple HTML document with <h1> tag and a <div> having unique id check. Inside this div a paragraph is written using <p>. Now we append HTML <h3> tag using insertAdjacentHTML method and use beforeend position to append this HTML code on a specific position.

Output:

The output clearly shows that insertAdjacentHTML method appends HTML code after the <p> tag inside the targeted div because we use its beforeend attribute to position our appended HTML code.

afterbegin
In the following code, this attribute will place the HTML code inside the check id div but just before the <p> tag.

Code:

In this code, we create a simple HTML document with <h1> tag and a <div> having unique id check. Inside this div a paragraph is written using <p>. Now we append HTML <h3> tag using insertAdjacentHTML method and use afterbegin position to append this HTML code on a specific position.

Output:

The output clearly shows that insertAdjacentHTML method appends HTML code inside the targeted div but just before the <p> tag because we use its afterbegin attribute to position our appended HTML code.

afterend
In the following code, this attribute will place the HTML code after the check id div.

Code:

In this code, we create a simple HTML document with <h1> tag and a <div> having a unique id check. Inside this div a paragraph is written using <p>. Now we append HTML <h3> tag using insertAdjacentHTML method and use afterend position to append this HTML code on a specific position.

Output:

The output clearly shows that insertAdjacentHTML method appends HTML code after the targeted div because we use its afterend attribute to position our appended HTML code.

Conclusion

In JavaScript, we can append HTML code to a div using innerHTML and insertAdjacentHTML. InnerHTML appends HTML code by replacing the current content in a div with new content whereas insertAdjacentHTML appends HTML code by positioning, using beforebegin, afterbegin, beforeend and afterend attributes. In this article, we have learned about the process of appending HTML code to a div using JavaScript.