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.
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)
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
- JS DOM: Node, Node Type, Element
- JS DOM: Get Element by ID, Name, Class etc
- JS DOM: Get Element Parent, Child, Sibling
- JS DOM: NodeList vs HTMLCollection
- JS DOM: Iterate HTMLCollection
- JS DOM: Element Attribute Methods
- JS DOM: List, Add, Remove Class Attribute
- JS DOM: Create Element, Clone
- JS DOM: Insert, Remove, Replace Element
- JS DOM: Change Element Content
- JS DOM: Add, Remove Event Handler