JS DOM: Insert, Remove, Replace Element

Insert as sibling or child

node.insertAdjacentElement(position, newNode)

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

• JS DOM: insert Adjacent Element

Insert as child

Append as last child

parent.appendChild(newNode)

• JS DOM: appendChild

Insert before a specific child

parent.insertBefore(newNode, nodeX)

Inserts newNode as a new child of parent before nodeX.

Remove Child

parent.removeChild(oldNode)

• JS DOM: Remove 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

• Remove All Children

Replace all children by text

• JS DOM: textContent, innerHTML, innerText, nodeValue