HTML DOM Element insertAdjacentElement()

Insert a span element after the header:

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterend", span);

More examples below.

Description

The insertAdjacentElement() method inserts a an element into a specified position.

Legal positions:

Value	Description
afterbegin	After the beginning of the element (first child)
afterend	After the element
beforebegin	Before the element
beforeend	Before the end of the element (last child)

element.insertAdjacentElement(position, element)

node.insertAdjacentElement(position, element)

Parameter	Description
position	Required. A position relative to the element: afterbegin afterend beforebegin beforeend
element	The element to insert.

Using "afterbegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterbegin", span);

Using "beforebegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforebegin", span);

Using "beforeend":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforeend", span);

element.insertAjacentElement() is supported in all browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes