How to append div in javascript


To add a new element to the HTML DOM, we have to create it first and then we need to append it to the existing element.

Steps to follow

1) First, create a div section and add some text to it using <p> tags

2) Create an element <p> using document.createElement("p").

3) Create a text, using document.createTextNode(), so as to insert it in the above-created element("p").

4) Using appendChild() try to append the created element, along with text, to the existing div tag.

Thus a new element is created(<p>) and appended to the existing element(<div>).

Example

In the following example, initially the div section consists of only 2 texts. But later on, one more text is created and added to the div section as shown in the output. 

Live Demo

<html>
<body>
<div id="new">
<p id="p1">Tutorix</p>
<p id="p2">Tutorialspoint</p>
</div>
<script>
   var tag = document.createElement("p");
   var text = document.createTextNode("Tutorix is the best e-learning platform");
   tag.appendChild(text);
   var element = document.getElementById("new");
   element.appendChild(tag);
</script>
</body>
</html>

Output

Tutorix

Tutorialspoint

Tutorix is the best e-learning platform

Updated on 30-Jul-2019 22:30:26

  • Related Questions & Answers
  • How to add a class to DOM element in JavaScript?
  • How to add an event handler to an element in JavaScript HTML DOM?
  • How to add many Event Handlers to the same element with JavaScript HTML DOM?
  • Add oninput attribute to HTML element with JavaScript?
  • How to add a new element in the XML using PowerShell?
  • How to add a new value to each element of list in R?
  • How to add an address element in HTML?
  • How to add an element to a javascript object?
  • Remove and add new HTML Tags with JavaScript?
  • How to add rows to a table using JavaScript DOM?
  • How to add two arrays into a new array in JavaScript?
  • MongoDB query to add new array element in document
  • How to add a unique id for an element in HTML?
  • How to add new value to an existing array in JavaScript?
  • How to add a new list element under a <ul> using jQuery?

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?

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Append</title>
</head>
<body>
    <h2 style="text-align: center;">Process to append HTML code using JavaScript</h2>

        <div id="check"></div>
    <script>
        document.getElementById("check").innerHTML = '<em style="font-size:30px;">This is a paragraph</em>'
    </script>
</body>
</html>

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Append</title>
</head>
<body>
    <h2 style="text-align: center;">Process to append HTML code using JavaScript</h2>

        <div id="check">
        <p>This paragraph is written to demonstrate the process of appending HTML code in a div using JavaScript.</p>
    </div>

    <script>
        document.getElementById("check").insertAdjacentHTML("beforebegin","<h3>A Simple Paragraph</h3>")
    </script>
</body>
</html>

In this code, we create a simple HTML document with <h2> 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:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Append</title>
</head>
<body>
    <h2 style="text-align: center;">Process to append HTML code using JavaScript</h2>

        <div id="check">
        <p>This paragraph is written to demonstrate the process of appending HTML code in a div using JavaScript.</p>
    </div>

    <script>
        document.getElementById("check").insertAdjacentHTML("beforeend","<h3>A Simple Paragraph</h3>")
    </script>
</body>
</html>

In this code, we create a simple HTML document with <h2> 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:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Append</title>
</head>
<body>
    <h2 style="text-align: center;">Process to append HTML code using JavaScript</h2>

        <div id="check">
        <p>This paragraph is written to demonstrate the process of appending HTML code in a div using JavaScript.</p>
    </div>

    <script>
        document.getElementById("check").insertAdjacentHTML("afterbegin","<h3>A Simple Paragraph</h3>")
    </script>
</body>
</html>

In this code, we create a simple HTML document with <h2> 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:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Append</title>
</head>
<body>
    <h2 style="text-align: center;">Process to append HTML code using JavaScript</h2>

        <div id="check">
        <p>This paragraph is written to demonstrate the process of appending HTML code in a div using JavaScript.</p>
    </div>

    <script>
        document.getElementById("check").insertAdjacentHTML("afterend","<h3>A Simple Paragraph</h3>")
    </script>
</body>
</html>

In this code, we create a simple HTML document with <h2> 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.

About the author

I am a computer science graduate with a passion to learn technical knowledge and share it
with the world. I love to work on top state-of-the-art computing languages. My aim is to best
serve the community with my work.

Can you append to a div in JavaScript?

Using the innerHTML attribute: To append using the innerHTML attribute, first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.

How do I append a div to a div?

First, select the div element which need to be copy into another div element. Select the target element where div element is copied. Use the append() method to copy the element as its child.

How do you append in JavaScript?

How it works:.
First, select the ul element by its id by using the querySelector() method..
Second, declare an array of languages..
Third, for each language, create a new li element with the textContent is assigned to the language..
Finally, append li elements to the ul element by using the append() method..

What is meant by append in JavaScript?

append() method inserts a set of Node objects or string objects after the last child of the Element . String objects are inserted as equivalent Text nodes. Differences from Node.