Insert HTML string before or after element using JavaScript

JavaScript's Element.insertAdjacentHTML() method allows you to insert an HTML string at various positions relative to a specified element. One of the most common use-cases is to insert an HTML string before or after the start of a specified element.

Insert an HTML string before element

The position that corresponds to inserting an HTML string before the start of a specified element is 'beforebegin'. You can use Element.insertAdjacentHTML() with this position to insert a given HTML string before the start of the specified element.

const insertBefore = (el, htmlString) =>
  el.insertAdjacentHTML('beforebegin', htmlString);

insertBefore(document.getElementById('myId'), '<p>before</p>');
// <p>before</p> <div id="myId">...</div>

Insert an HTML string after element

Similarly, to insert an HTML string after the start of a specified element, you can use Element.insertAdjacentHTML() with a position of 'afterend'.

const insertAfter = (el, htmlString) =>
  el.insertAdjacentHTML('afterend', htmlString);

insertAfter(document.getElementById('myId'), '<p>after</p>');
// <div id="myId">...</div> <p>after</p>