v148 · HTML · DOM

Position Insertion Explorer

Try each of the new positional HTML insertion methods — before(), after(), prepend(), append(), replaceWith() — against a live target element. Chrome 148 adds HTML string overloads to these methods, removing the need for insertAdjacentHTML.

Checking positional HTML insertion method support…

Choose method

Live result

target element
Original content inside the element.
Operations will appear here…

Chrome 148 HTML string overloads

// Old way — insertAdjacentHTML (still works):
el.insertAdjacentHTML('beforebegin', '<p>before</p>');
el.insertAdjacentHTML('afterbegin',  '<p>first child</p>');
el.insertAdjacentHTML('beforeend',   '<p>last child</p>');
el.insertAdjacentHTML('afterend',    '<p>after</p>');

// Chrome 148 — positional methods accept HTML strings directly:
el.before('<p>before</p>');           // = beforebegin
el.prepend('<p>first child</p>');      // = afterbegin
el.append('<p>last child</p>');       // = beforeend
el.after('<p>after</p>');            // = afterend
el.replaceWith('<p>replacement</p>');  // replaces the whole element

references

implementation reference

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