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

Javascript >   DOM Manipulation >   Introduction to DOM  

Long Question

260

Answer:

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".

This Particular section is dedicated to Question & Answer only. If you want learn more about Javascript. Then you can visit below links to get more depth on this subject.

Javascript Syllabus
Javascript Tutorial
Javascript Programs
JavaScript Interview Questions

# C Tutorials # JAVA Tutorials # HTML Tutorials # Computer Fundamental # Data Structure # DBMS Tutorials SQL # C# Language # R Language # PHP # Python # Vue JS

Join Our telegram group to ask Questions

Click below button to join our groups.

Ask Question - CSE
Programming Language - PDF