v152 · DOM · Positional Insertion

Positional Insertion Methods

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

Chrome 152 required. These methods ship in Chrome 152 (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 152+ — 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