v151 · DOM · Positional Insertion

Positional Insertion Methods

Chrome 151 adds appendHTML(), prependHTML(), beforeHTML(), and afterHTML() to DOM elements — named, readable replacements for insertAdjacentHTML's cryptic position strings.

Chrome 151 required. These methods ship in Chrome 151 (Dev channel). The demo uses a fallback via insertAdjacentHTML in other browsers — exact same visual result, labelled accordingly.

live demo

Sandbox — click a method button to insert HTML relative to the target element:

⬛ Target element

beforeHTML(html)

Inserts HTML immediately before this element (as a preceding sibling).

≈ insertAdjacentHTML('beforebegin', html)

prependHTML(html)

Inserts HTML as the first child of this element.

≈ insertAdjacentHTML('afterbegin', html)

appendHTML(html)

Inserts HTML as the last child of this element.

≈ insertAdjacentHTML('beforeend', html)

afterHTML(html)

Inserts HTML immediately after this element (as a following sibling).

≈ insertAdjacentHTML('afterend', html)

code

// Chrome 151+ — named, readable API
target.beforeHTML('<div class="inserted">before</div>');
target.prependHTML('<div class="inserted">first child</div>');
target.appendHTML('<div class="inserted">last child</div>');
target.afterHTML('<div class="inserted">after</div>');

// Equivalent using the old API
target.insertAdjacentHTML('beforebegin', '<div>before</div>');
target.insertAdjacentHTML('afterbegin',  '<div>first child</div>');
target.insertAdjacentHTML('beforeend',   '<div>last child</div>');
target.insertAdjacentHTML('afterend',    '<div>after</div>');

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗