Home / Questions / How to Insert Element in Document after Specific Div Element using JavaScript?
Explanatory Question

How to Insert Element in Document after Specific Div Element using JavaScript?

👁 286 Views
📘 Detailed Answer
🕒 Easy to Read
Read the answer carefully and go through the related questions on the right side to improve your understanding of this topic.

Answer with Explanation

JavaScript – Insert Element after Specific Div Element

To insert element in document after div element using JavaScript, get reference to the div element; call after() method on this div element; and pass the element to insert, as argument to after() method.

Example 1

In the following example, we have div with id "myDiv", and we shall add a paragraph element after this div using after() method.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
    #myDiv {
        width:100px;
        height:100px;
        background:rgb(67, 187, 12);
    }
</style>
</head>
<body>
    <h2>Append HTML after Div using JavaScript</h2>
    <div id="myDiv"></div>
    <br>
    <button type="button" onclick="execute()">Click Me</button>
    <script>
    function execute(){
        var para = document.createElement('p');
        para.textContent = 'Hello World!';
        
        var element = document.getElementById('myDiv');
        element.after(para);
    }
    </script>
</body>
</html>

Example 2 – Insert Div in Document after Specific Div

Now, let us create a div element and insert this div after the element with id "myDiv" using after() method.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
    div {
        width:100px;
        height:100px;
        margin:10px;
        background:rgb(67, 187, 12);
    }
</style>
</head>
<body>
    <h2>Append HTML after Div using JavaScript</h2>
    <div id="myDiv"></div>
    <br>
    <button type="button" onclick="execute()">Click Me</button>
    <script>
    function execute(){
        var anotherDiv = document.createElement('div');
        
        var element = document.getElementById('myDiv');
        element.after(anotherDiv);
    }
    </script>
</body>
</html>

When you click on Click Me button in the output of HTML, a new div will be added after the div element with id "myDiv".