JavaScript Element after() Method

What You’ll Learn

Element.after() is an instance method from the ChildNode API. It inserts nodes or strings in the parent’s child list, just after the element you call it on. Learn multi-argument inserts, text coercion, how it compares to insertBefore(), and five try-it labs.

Introduction

Older DOM code often used parent.insertBefore(newNode, ref.nextSibling) to place something after a sibling. after() makes that intent clear: call it on the element that should come first, and pass what should follow.

You can pass elements, other nodes, or plain strings. Strings become Text nodes automatically—handy for labels and spacing without creating nodes by hand.

This page is part of JavaScript Element. Related DOM helpers include insertBefore() and appendChild().

Understanding the after() Method

Calling el.after(...nodes) does not add children inside el. It updates el’s parent so the new nodes sit immediately after el among siblings.

• It is an instance method on Element (ChildNode mixin).
• Arguments can be Node objects or strings (as Text).
• Multiple arguments insert in the order you pass them.
• Existing nodes in the document are moved, not cloned.
• Return value is undefined—inspect the DOM to confirm.

📝 Syntax

General forms of Element.after (MDN):

after(node1)
after(node1, node2)
after(node1, node2, /* …, */ nodeN)

Parameters

• node1, …, nodeN — a set of Node objects or strings to insert. Strings are inserted as equivalent Text nodes.

Return value

None (undefined).

Exceptions

• HierarchyRequestError DOMException — thrown when the node cannot be inserted at the specified point in the hierarchy (MDN).

Common patterns

const p = document.querySelector("p");
const span = document.createElement("span");

p.after(span);                 // insert one element
p.after("Text");               // insert a Text node
p.after(span, "Text");         // element, then text
p.after(span, " · ", "more");  // several siblings in order

Examples Gallery

Examples follow MDN Element.after() patterns. Use View Output or Try It Yourself for each case.

let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.after(span);

console.log(container.outerHTML);
// "<div><p></p><span></span></div>"

<div><p></p><span></span></div>

let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);

p.after("Text");

console.log(container.outerHTML);
// "<div><p></p>Text</div>"

<div><p></p>Text</div>

let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.after(span, "Text");

console.log(container.outerHTML);
// "<div><p></p><span></span>Text</div>"

<div><p></p><span></span>Text</div>

const item = document.getElementById("item");
const badge = document.createElement("strong");
badge.textContent = "NEW";
const em = document.createElement("em");

item.after(badge, " ", em);
em.textContent = "sale";

console.log(item.parentElement.innerHTML);
// <li id="item">Shoes</li><strong>NEW</strong> <em>sale</em>

<li id="item">Shoes</li><strong>NEW</strong> <em>sale</em>

const list = document.getElementById("list");
const a = document.getElementById("a");
const b = document.getElementById("b");

a.after(b);

console.log([...list.children].map((el) => el.id).join(", "));
// "a, b"  (b moved to sit after a)

a, b

🚀 Common Use Cases

• Inserting a badge, icon, or label right after a title or list item.
• Adding helper text or separators without wrapping extra containers.
• Reordering siblings by moving an existing node after another.
• Replacing the old insertBefore(..., nextSibling) pattern with clearer code.
• Building small UI trails (element + text + element) in one call.
• Teaching sibling insertion vs appending children inside an element.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available since April 2018).
• after() inserts siblings, not children of the element.
• Return value is always undefined.
• Invalid hierarchy can raise HierarchyRequestError.
• Same ChildNode family: before(), append(), prepend(), replaceWith().
• Related: insertBefore(), appendChild(), children, JavaScript hub.

💡 Best Practices