JavaScript: insertAdjacentElement

insertAdjacentElement lets you insert an element before or after a given element as sibling, or, as first child or last child.

node.insertAdjacentElement(position, newNode)

Move a element and insert it adjacent to node's begin/end tags.

Return the element inserted, or null if failed.

position is a string, and must be one of:

• "beforebegin" → Before the beginning tag. (as previous sibling.)
• "afterbegin" → After the beginning tag. (as first child.)
• "beforeend" → Before end tag . (as last child).
• "afterend" → After the tag. (as next sibling.)

// create new node p containing hi
const y = document.createElement("p");
y.textContent = "hi";

// a existing node
const x = document.getElementsByTagName ("p")[0] ;

// insert after
x. insertAdjacentElement("afterend", y);