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