JavaScript Element insertAdjacentHTML() Method

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

Definition

In JavaScript, the insertAdjacentHTML() method parses an HTML (or XML) string and inserts the resulting nodes at a position relative to the element (MDN).

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

Syntax

Call el.insertAdjacentHTML. Start with this line.

JavaScript
el.insertAdjacentHTML(position, input)
CallWhat it does
el.insertAdjacentHTML(position, input)Primary signature.
el.insertAdjacentHTML(...)Call with the arguments your case needs.

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

Library declarations
JavaScript
el.insertAdjacentHTML(position, input)

Parameters

ParameterDescription
positionRequired. string. Where to insert relative to the target
inputRequired. string | TrustedHTML. HTML/XML to parse (MDN)

Return Value

Return ValueDescription
*No useful return value

JavaScript Examples

Example 1 — beforeend

Parse a small HTML string and append it as the last child.

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

list.insertAdjacentHTML("beforeend", "<li>C</li>");
console.log(list.textContent);
Try It Yourself

How It Works

  1. Find the target. The list that will receive new markup.
  2. Pass an HTML string. Browser parses it into nodes.
  3. Use beforeend. Nodes become the last children (MDN).
  4. No return value. Method returns undefined.

Example 2 — beforebegin / afterend

Insert markup as siblings around the target (needs a parent).

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

box.insertAdjacentHTML("beforebegin", "<span>B</span>");
box.insertAdjacentHTML("afterend", "<span>A</span>");

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

How It Works

  1. beforebegin. Parsed nodes sit just before the target.
  2. afterend. Parsed nodes sit just after the target.
  3. Parent required. MDN: invalid without an element parent → error.
  4. Target stays. Content is added around it, not by replacing it.

Example 3 — vs insertAdjacentElement()

String parse vs inserting an existing Element node.

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

// HTML string → parse + insert
box.insertAdjacentHTML("beforeend", "<em> via HTML</em>");

// Element node → no parsing
const el = document.createElement("strong");
el.textContent = " via Element";
box.insertAdjacentElement("beforeend", el);

console.log(box.innerHTML);
Try It Yourself

How It Works

  1. insertAdjacentHTML. Parses a string into nodes (MDN).
  2. insertAdjacentElement. Places a ready Element — no parse step.
  3. Same positions. Both share the four relative position names.
  4. Pick by input type. String markup vs node you already built.
Compatibility

Browser Support

Element.insertAdjacentHTML() is Baseline Widely available (MDN: across browsers since April 2018). Safe for modern teaching and production code — with XSS hygiene.

✓ Baseline · Widely available

insertAdjacentHTML()

Parse an HTML string and insert the resulting nodes at a relative position.

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 4+
Supported
insertAdjacentHTML() Widely available

Bottom line: Use insertAdjacentHTML for trusted markup inserts; never pass raw user HTML.

Frequently Asked Questions

It parses an HTML or XML string and inserts the resulting nodes at a position relative to the element (MDN). Positions: beforebegin, afterbegin, beforeend, afterend.
No. MDN marks Element.insertAdjacentHTML() as Baseline Widely available (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard.
Nothing useful — the return value is undefined (MDN).
insertAdjacentHTML() takes an HTML string and parses it. insertAdjacentElement() inserts an existing Element node.
MDN warns it is an injection sink (XSS risk). Never pass untrusted strings directly. Sanitize input, use Trusted Types, or use insertAdjacentText() for plain text.
MDN: it does not reparse the element it is called on, so existing children are not corrupted. It is often faster than replacing innerHTML on the parent.

Next: insertAdjacentText()

Learn how to insert plain text at the same relative positions — without parsing HTML.

insertAdjacentText 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 insertAdjacentElement() Method JavaScript Element insertAdjacentText() Method