The JavaScript insertAdjacentHTML() method
The insertAdjacentHTML() method inserts a string of HTML at a precise position relative to an element, without destroying its existing contents. el.insertAdjacentHTML("beforeend", "<li>New</li>") appends a list item. The position is one of four keywords. Like innerHTML, never use it with untrusted input.
Overview
insertAdjacentHTML() parses a string of HTML and inserts it at an exact spot around an element — without touching what's already there. That's its advantage over innerHTML, which replaces all contents (and rebuilds existing children, dropping their event listeners). With insertAdjacentHTML() you add to the page surgically.
The first argument is one of four position keywords: "beforebegin" (just before the element), "afterbegin" (inside, at the start), "beforeend" (inside, at the end), and "afterend" (just after the element). "beforeend" is the most common — it appends inside the element. The second argument is the HTML string to insert.
The same safety rule as innerHTML applies: it parses HTML, so never pass untrusted or user input — that's a cross-site scripting (XSS) risk. Use it only for HTML you control. When you need to insert text or build complex nodes from data, createElement() with append() is safer. (There are also insertAdjacentElement() and insertAdjacentText() for nodes and plain text.)
Syntax
element.insertAdjacentHTML(position, htmlString)
// positions:
// "beforebegin" before the element
// "afterbegin" inside, at the start
// "beforeend" inside, at the end (most common)
// "afterend" after the element
list.insertAdjacentHTML("beforeend", "<li>New item</li>");Parameters
The insertAdjacentHTML() method accepts the following parameters.
| Parameter | Description |
|---|---|
position |
One of "beforebegin", "afterbegin", "beforeend", "afterend". |
htmlString |
The HTML to parse and insert. Must be trusted — never user input. |
Example
<ul id="list" style="font:15px system-ui">
<li>Existing item</li>
</ul>
<button onclick="addItem()" style="font:14px system-ui;margin-top:8px">Add item</button>
<script>
let count = 1;
function addItem() {
count++;
document.getElementById('list')
.insertAdjacentHTML('beforeend', '<li>Item ' + count + '</li>');
}
</script>Best practices
- Use
"beforeend"to append inside an element without wiping its contents or listeners. - Never insert untrusted or user-supplied HTML — it's an XSS risk, like innerHTML.
- For data-driven or text content, prefer createElement() + append().
- Pick the position keyword deliberately — inside vs outside, start vs end.
Frequently asked questions
What is the difference between insertAdjacentHTML() and innerHTML?
insertAdjacentHTML() inserts at a chosen position without replacing existing content; setting innerHTML replaces everything inside the element.What are the position options?
"beforebegin", "afterbegin", "beforeend" and "afterend" — before/after the element, and inside at the start/end.Is insertAdjacentHTML() safe?
How do I append an element without replacing content?
el.insertAdjacentHTML("beforeend", html) for trusted HTML, or build a node and use append().