How to Insert an Element After Another in JavaScript Without Using a Library? - Coding

The Manipulation of DOM (Document Object Model) is a fundamental task in web development. One common requirement is to insert a new element after an existing one. While libraries like jQuery make this task easy it’s useful to know how to accomplish it with pure JavaScript. This article will guide you through the steps to insert an element after another element using native JavaScript methods.

Inserting an Element After Another Element

To insert an element after another element we can use the insertBefore method in combination with the nextSibling property. The insertBefore method inserts a node before a specified child node and the nextSibling property returns the node immediately followed by the specified node.

Step To Insert An Element After Another

Step 1: Create the New Element

First, create a new element that we want to insert. We can use the createElement method to create a new element and the createTextNode method to create a text node if needed.

let newElement = document.createElement('div');
newElement.textContent = 'This is the new element.';

Step 2: Select the Reference Element

Next, select the existing element after which we want to insert the new element. We can use methods like getElementById getElementsByClassName, getElementsByTagName or querySelector to select the reference element.

let referenceElement = document.getElementById('referenceElement');

Step 3: Insert the New Element

To insert the new element after the reference element use insertBefore method with the nextSibling of the reference element. If the reference element is the last child, nextSibling will be null and insertBefore will behave like appendChild.

referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);

Example

Here is a complete example demonstrating how to insert the new element after an existing one:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Insert Element After Another Element</title>
</head>
<body>
    <div id="referenceElement">This is the reference element.</div>
    <script>
        // Step 1: Create the new element
        let newElement = document.createElement('div');
        newElement.textContent = 'This is the new element.';
        // Step 2: Select the reference element
        let referenceElement = document.getElementById('referenceElement');
        // Step 3: Insert the new element after the reference element
        referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
    </script>
</body>
</html>

Output

How to Insert an Element After Another in JavaScript Without Using a Library?

Reffered: https://www.geeksforgeeks.org

HTML

Related
How to Fix Images Not Showing in HTML?
Performing CRUD Operations with HTMX
HTML Sign Up Form
HTML5
How to Get Milliseconds in JavaScript?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	16