JavaScript insertAfter() method

In modern JavaScript, there is no native .insertAfter() method on the Element or Node prototypes. While it seems like a logical counterpart to the standard insertBefore() method, the W3C DOM specification originally left it out.

However, developers have three powerful ways to achieve this functionality: using the modern after() method, leveraging the flexible insertBefore() method with nextSibling, or using the highly efficient insertAdjacentElement().

1. The Modern Solution: after()

The after() method is the most direct equivalent to an “insert after” command. It allows you to insert one or more nodes (or strings) immediately after the element it is called upon.

// Syntax: element.after(node1, node2, ...nodes)

const currentItem = document.querySelector('#item-1');
const newItem = document.createElement('li');
newItem.textContent = 'Item 2 (New)';

// Inserts newItem immediately after currentItem
currentItem.after(newItem);

Key Advantages of .after():

• Multiple Inputs: You can pass multiple nodes or even plain text strings in one call.
• Ease of Use: No need to reference the parent node manually.
• Flexibility: It handles the positioning logic for you relative to the target element.

2. The Classic Workaround: insertBefore()

Before the methods above existed, developers used a clever trick. To insert after Element A, you actually insert before Element A’s next sibling.

The Logic

If you want to place $B$ after $A$, and $A$ is followed by $C$, you simply tell the parent to insert $B$ before $C$.

function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}

// Usage:
const parent = document.getElementById('parent');
const refNode = document.getElementById('reference');
const newNode = document.createElement('p');

insertAfter(newNode, refNode);

Note: If existingNode is the last child, nextSibling is null. Conveniently, insertBefore(newNode, null) behaves exactly like appendChild(), so this logic works perfectly even at the end of a list.

3. The Universal Approach: insertAdjacentElement()

If you need highly specific placement, insertAdjacentElement() is the most robust method. It uses a “position” string to determine exactly where the new element should go.

const reference = document.querySelector('.target');
const newNode = document.createElement('span');
newNode.textContent = ' I am after!';

// 'afterend' places the element immediately after the target element itself
reference.insertAdjacentElement('afterend', newNode);

Position Options:

const fragment = document.createDocumentFragment();
items.forEach(data => {
    const el = document.createElement('div');
    el.textContent = data;
    fragment.appendChild(el);
});

// Only one reflow triggered here
referenceNode.after(fragment);