Element

`Element.prototype.insertAdjacentHTML`

Parses the specified text as HTML and inserts the resulting nodes into the DOM tree at a specified position

Syntax

JavaScript

element.insertAdjacentHTML(position, text)

Parameters

Parameter	Type	Description
position	'beforebegin' \| 'afterbegin' \| 'beforeend' \| 'afterend'	The position relative to the element
text	string	The HTML string to be parsed and inserted

Return Value

undefined

Examples

Basic Usage

const list = document.querySelector('ul')!
list.insertAdjacentHTML('beforeend', '<li>New Item</li>')

Practical Example

const card = document.querySelector('.card')!
card.insertAdjacentHTML('afterbegin', '<div class="badge">New</div>')

Advanced Usage

function addRow(table: HTMLTableElement, cells: string[]) {
  const html = '<tr>' + cells.map(c => `<td>${c}</td>`).join('') + '</tr>'
  table.tBodies[0].insertAdjacentHTML('beforeend', html)
}

Understanding Element.prototype.insertAdjacentHTML

The Element.prototype.insertAdjacentHTML method in JavaScript parses the specified text as HTML and inserts the resulting nodes into the DOM tree at a specified position. It belongs to the Element object and is one of the most widely used methods for working with element values in modern JavaScript and TypeScript applications.

The method signature is element.insertAdjacentHTML(position, text). It accepts 2 parameters: position, text. When called, it returns undefined. Understanding when and how to use insertAdjacentHTML() helps you write more expressive, readable code.

Common use cases for Element.prototype.insertAdjacentHTML include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like dom-innerhtml, dom-append, dom-prepend, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for Element.prototype.insertAdjacentHTML is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.