JavaScript Element insertAdjacentElement() Method

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

Definition

In JavaScript, the insertAdjacentElement() method inserts an Element at a position relative to the element you call it on (MDN).

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

Syntax

Call el.insertAdjacentElement. Start with this line.

JavaScript
target.insertAdjacentElement(position, element)
CallWhat it does
target.insertAdjacentElement(position, element)Primary signature.
el.insertAdjacentElement(...)Call with the arguments your case needs.

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

Library declarations
JavaScript
target.insertAdjacentElement(position, element)

Parameters

ParameterDescription
positionRequired. string. Where to place the element (MDN)

Return Value

Return ValueDescription
*Inserted node, or null on failure

JavaScript Examples

Example 1 — beforeend (Last Child)

Insert inside the target, after its current children.

JavaScript
const list = document.getElementById("list");
const item = document.createElement("li");
item.textContent = "C";

list.insertAdjacentElement("beforeend", item);
console.log(list.textContent);
Try It Yourself

How It Works

  1. Find the target. The list that will hold the new item.
  2. Create an Element. createElement("li") — not an HTML string.
  3. Use beforeend. Places it as the last child (MDN).
  4. Get the node back. Return value is the inserted element.

Example 2 — beforebegin / afterend

Insert as a sibling before or after the target (needs a parent).

JavaScript
const box = document.getElementById("box");

const before = document.createElement("span");
before.textContent = "B";
box.insertAdjacentElement("beforebegin", before);

const after = document.createElement("span");
after.textContent = "A";
box.insertAdjacentElement("afterend", after);

console.log(box.parentElement.textContent);
Try It Yourself

How It Works

  1. beforebegin. New node sits just before the target.
  2. afterend. New node sits just after the target.
  3. Parent required. MDN: these positions need an element parent in the tree.
  4. Target unchanged. Siblings are added around it, not inside it.

Example 3 — afterbegin (First Child)

Insert inside the target, before its first child.

JavaScript
const box = document.getElementById("box"); // <p>foo</p>
const tip = document.createElement("strong");
tip.textContent = "Hi ";

box.insertAdjacentElement("afterbegin", tip);
console.log(box.textContent);
Try It Yourself

How It Works

  1. Pick afterbegin. First child inside the target (MDN).
  2. Insert the Element. Existing content shifts after it.
  3. Like prepend. Similar idea to prepend() for one element.
  4. Works without a parent. Inside positions do not need siblings’ parent check.
Compatibility

Browser Support

Element.insertAdjacentElement() is Baseline Widely available (MDN: across browsers since April 2018). Safe for modern teaching and production code.

✓ Baseline · Widely available

insertAdjacentElement()

Insert an Element node at a position relative to another element.

Wide Baseline
Google Chrome Full support
Supported
Mozilla Firefox Full support
Supported
Apple Safari Full support
Supported
Microsoft Edge Full support
Supported
Opera Full support
Supported
Internet Explorer 8+
Supported
insertAdjacentElement() Widely available

Bottom line: Use insertAdjacentElement when you already have an Element node and a clear relative position.

Frequently Asked Questions

It inserts a given element node at a position relative to the element it is called on. MDN positions: beforebegin, afterbegin, beforeend, afterend.
No. MDN marks Element.insertAdjacentElement() as Baseline Widely available (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard.
beforebegin (before the element), afterbegin (first child inside), beforeend (last child inside), afterend (after the element). Matching is case-insensitive (MDN).
The element that was inserted, or null if insertion failed (MDN).
insertAdjacentElement() takes an Element node. insertAdjacentHTML() parses an HTML string into nodes.
MDN: they work only when the node is in a tree and has an element parent.

Next: insertAdjacentHTML()

Learn how to insert markup from an HTML string at the same relative positions.

insertAdjacentHTML tutorial →

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)

11 people found this page helpful

JavaScript Element hasPointerCapture() Method JavaScript Element insertAdjacentHTML() Method