JavaScript Element after() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word AFTER

Definition

The Element.after() method inserts one or more nodes or strings into the children list of this element’s parent, immediately after this element (MDN). Strings become Text nodes. It returns undefined.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.after. Start with this line.

JavaScript
el.after(node1, node2, …)
CallWhat it does
el.after(node1, node2, …)Primary signature.
el.after(...)Call with the arguments your case needs.

Built into the browser. Call after(...) on an Element — no import required.

Library declarations
JavaScript
el.after(node1, node2, …)

Parameters

ParameterDescription
Reference elementRequired. Must have a parent to insert into
node1…nodeNRequired. Node objects and/or strings

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Insert an Element

Place a new sibling right after a paragraph.

JavaScript
const p = document.getElementById("p");
const out = document.getElementById("out");
const span = document.createElement("span");
span.textContent = "after";

p.after(span);
out.textContent = p.parentNode.innerHTML;
Try It Yourself

How It Works

  1. Pick the reference. p is the sibling that stays in front.
  2. Create the new node. Build a span (or any element).
  3. Call after(). The span becomes p’s next sibling.
  4. Inspect the parent. innerHTML shows the updated child list.

Example 2 — Insert Text

Pass a string — the browser creates a Text node for you.

JavaScript
const p = document.getElementById("p");
const out = document.getElementById("out");

p.after(" Text");
out.textContent = p.parentNode.innerHTML;
Try It Yourself

How It Works

  1. Pass a string. No need for createTextNode here.
  2. Browser coerces it. MDN: strings become equivalent Text nodes.
  3. Order stays clear. The text sits immediately after p.
  4. Read the parent. Confirm with innerHTML.

Example 3 — Multiple Arguments

Insert an element and text in one call, in argument order.

JavaScript
const p = document.getElementById("p");
const out = document.getElementById("out");
const span = document.createElement("span");
span.textContent = "A";

p.after(span, " B");
out.textContent = p.parentNode.innerHTML;
Try It Yourself

How It Works

  1. Pass several items. Nodes and strings can mix in one call.
  2. Keep argument order. First argument is closest after p.
  3. One DOM update pattern. Cleaner than several separate inserts.
  4. Verify. Parent HTML shows p, then span, then text.
Compatibility

Browser Support

Element.after() is Baseline Widely available on MDN (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard. Prefer it over older sibling-insert patterns when you can.

✓ Baseline Widely available

Element.after()

Modern ChildNode insert — nodes or strings after a sibling. Widely supported since 2018.

2018+ Widely available
Google Chrome 54+
Supported
Mozilla Firefox 49+
Supported
Apple Safari 10+
Supported
Microsoft Edge 17+
Supported
Opera 41+
Supported
Internet Explorer Not supported — use insertBefore
Unavailable
after() Baseline

Bottom line: Safe for modern browsers. For very old IE, use parent.insertBefore with a reference sibling.

Frequently Asked Questions

It inserts one or more Node objects or strings into the children of this element’s parent, immediately after this element (MDN). Strings become Text nodes.
No. MDN marks Element.after() as Baseline Widely available (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard.
Nothing useful — the return value is undefined. The DOM is updated in place; check parent.outerHTML or nextSibling if you need to verify the result.
Yes. after(node1, node2, …) inserts all arguments in order, right after the element you call it on.
after() is called on the sibling you want to place content after. insertBefore() is called on the parent and needs a reference child. Modern after() also accepts strings as Text nodes.
If the element is not in a parent’s child list, after() has nowhere to insert. Invalid hierarchy cases can throw a HierarchyRequestError DOMException.

Next: animate()

Run Web Animations on an element with Element.animate().

animate() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

18 people found this page helpful

JavaScript Element tagName Property JavaScript Element animate() Method