Insert an element after other one

Place an element right after a reference element.

JavaScriptBrowser · DOM Version 1.0.0 · MIT · .md

function insertAfter(element, reference) { reference.after(element); }

Usage

Markup

<ol id="steps"><li id="one">One</li><li id="three">Three</li></ol>

Script

const two = document.createElement('li');
two.textContent = 'Two';
insertAfter(two, document.querySelector('#one'));
[...document.querySelector('#steps').children].map(li => li.textContent); // → ['One', 'Two', 'Three']

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

Know the limits

• Element.after, before and replaceWith are the modern ChildNode methods; the original used parentNode.insertBefore with nextSibling.
• Inserting a node that is already in the document moves it.

The function above is the code the usage lines run. It does not validate its arguments; add checks where it receives untrusted input.

Keep exploring

• Check if a given DOMRect is contained within another DOMRect — True when the target lies inside the container or on its edges.
• Check if two DOMRects intersect — Two rects intersect when they meet on both axes.
• Compare two DOMRects for size and position match — Compare x, y, width and height exactly.