JS: Insert, Remove, Replace Element

By Xah Lee. Date: . Last updated: .

Insert as Sibling or Child

node.insertAdjacentElement(position, newNode)

insert a new node as previous/next sibling, or as first/last child.

see insertAdjacentElement

Insert as Child

parent.appendChild(newNode)

insert a new node as last child. γ€”see appendChild (Append Element as Child)〕

parent.insertBefore(newNode, nodeX)
Inserts newNode as a new child of parent before nodeX.

Remove Child

parent.removeChild(oldNode)
see Remove HTML Element

Replace Child

parent.replaceChild(newNode, oldNode)
Replaces the child node oldNode of parent with newNode.

If newNode is in the same doc, move it to the new place.

Remove All Children

Basic DOM Element Methods