DOM - InsertAdjacent

InsertAdjacent is a function that permits:

• to insert:
  • a node (insertAdjacent)
  • or html string (insertAdjacentHTML)
• into the DOM tree
• relatively to a node
• at this positions (as a child or sibling)

let bodySibling = document.createElement('p');
bodySibling.innerText = 'Body Sibling Element';
document.body.insertAdjacentElement('afterend', bodySibling);

• Result:

document.body.insertAdjacentHTML('afterend', '<p>Body Sibling HTML</p>');

• Result:

element.insertAdjacentElement(position, siblingElement);
element.insertAdjacentHTML(position, text);

where position is:

• beforebegin
• afterbegin
• beforeend
• afterend

<!-- beforebegin -->
<element>
  <!-- afterbegin -->
  text
  <!-- beforeend -->
</element>
<!-- afterend -->