JavaScript Element insertAdjacentHTML() Method

What You’ll Learn

Element.insertAdjacentHTML() is an instance method that parses an HTML string and inserts the resulting nodes at one of four positions: beforebegin, afterbegin, beforeend, and afterend. Learn the MDN position diagram, comparison with insertAdjacentElement(), XSS safety basics, and five try-it labs aligned with MDN.

Introduction

Sometimes you have a small HTML snippet — a list item, a badge, or a paragraph with formatting — and you want to drop it into the page at an exact spot. insertAdjacentHTML(position, htmlString) parses that string and inserts the nodes relative to your target element.

MDN: the method parses the specified input as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It uses the same four position names as insertAdjacentElement().

This page is part of JavaScript Element. Pair it with insertAdjacentElement() when you already have an Element node instead of a string.

Understanding the insertAdjacentHTML() Method

Calling target.insertAdjacentHTML(position, input) parses input and inserts nodes relative to target.

• It is an instance method on Element.
• First argument: position string (beforebegin, afterbegin, beforeend, afterend).
• Second argument: HTML or XML string to parse (MDN).
• Returns undefined (MDN).
• Does not reparse the target element’s existing children (MDN).
• Often faster than rewriting innerHTML on the whole parent.
• MDN: APIs like this can enable XSS if input comes from an attacker.

📝 Syntax

General form of Element.insertAdjacentHTML (MDN):

insertAdjacentHTML(position, input)

Parameters

position — One of "beforebegin", "afterbegin", "beforeend", or "afterend" (MDN).

input — A string defining the HTML or XML to be parsed (MDN).

Return value

None (undefined) (MDN).

Position diagram (MDN)

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Common patterns

// MDN: insert parsed HTML at selected position
const html = "<strong>inserted text</strong>";
subject.insertAdjacentHTML(positionSelect.value, html);

// Append snippet inside container
list.insertAdjacentHTML("beforeend", "<li>New item</li>");

// Prepend banner inside panel
panel.insertAdjacentHTML("afterbegin", '<div class="banner">Notice</div>');

// Plain user text? Use insertAdjacentText instead (MDN)
note.insertAdjacentText("beforeend", userComment);

Examples Gallery

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

const subject = document.getElementById("subject");
const position = document.getElementById("position").value;
const html = "<strong>inserted text</strong>";

subject.insertAdjacentHTML(position, html);

// position is one of:
// "beforebegin" | "afterbegin" | "beforeend" | "afterend"

<strong>inserted text</strong> parsed into DOM

const panel = document.getElementById("panel");

panel.insertAdjacentHTML(
  "afterbegin",
  '<div class="banner">New notice</div>'
);

console.log(panel.firstElementChild.className); // "banner"

banner

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

list.insertAdjacentHTML("beforeend", "<li>New task</li>");
console.log(list.children.length); // +1 item

3

const card = document.getElementById("card");

card.insertAdjacentHTML(
  "afterend",
  '<p class="hint">Saved just now</p>'
);

console.log(card.nextElementSibling.className); // "hint"

hint

const userComment = getUserInput(); // untrusted

// Risky — XSS if userComment contains HTML (MDN)
// box.insertAdjacentHTML("beforeend", userComment);

// Safer for plain text — use insertAdjacentText (MDN)
box.insertAdjacentText("beforeend", userComment);

// Or sanitize HTML with a library before insertAdjacentHTML

plain text inserted safely

🚀 Common Use Cases

• Injecting small HTML templates at precise positions (MDN four slots).
• Appending chat messages or notifications with beforeend.
• Prepending alerts inside a panel with afterbegin.
• Adding helper text after a field with afterend.
• Faster partial updates than rewriting parent innerHTML (MDN).
• Rendering trusted server-generated markup snippets in SPAs.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, April 2018).
• Returns undefined — no inserted node reference (MDN).
• MDN XSS warning: do not pass untrusted strings without sanitization.
• Does not reparse the target element’s existing children (MDN).
• beforebegin / afterend require an element parent in the tree (MDN).
• Related: insertAdjacentElement(), append(), insertAdjacentText(), JavaScript hub.

💡 Best Practices