element.insertAdjacentHTML() Insert adjacent HTML
Last updated: 2026-09-09
element.insertAdjacentHTML() Insert adjacent HTML
insertAdjacentHTML inserts HTML at a specified position without overwriting existing content.
| Category | DOM |
|---|---|
| ES version | DOM |
📝 Syntax
el.insertAdjacentHTML('beforeend', html);⚙️ Parameters
| position | Position: beforebegin, afterbegin, beforeend, afterend. |
|---|---|
| html | The HTML string to insert. |
Returns：undefined.
Mutates the original：Yes (in place)
▶ Example
Edit the code, press Run, and see the result in the output panel:
Output：
(HTML inserted)💡 Tip insertAdjacentHTML appends without overwriting — unlike innerHTML.
⚠️ Warning Same XSS risk as innerHTML — escape user input.
🌐 Browser support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| element.insertAdjacentHTML() | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported by all modern browsers | |||||
🏷️ Related Items
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
❓ FAQ
QinsertAdjacentHTML vs innerHTML?
AinsertAdjacentHTML inserts at position without overwriting; innerHTML replaces everything.
Qbeforeend vs afterend?
Abeforeend is inside as last child; afterend is outside as next sibling.
QWhat are the four positions?
Abeforebegin, afterbegin, beforeend, afterend.
