JS: insert Adjacent Element

By Xah Lee. Date: . Last updated: .
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.)

💡 TIP: use this to attach element, more flexible than appendChild or insertBefore 

// 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);