DOM Part 3: Creating & Removing Elements¶
1. createElement()¶
Creates a new DOM element (not in the document yet).
let newDiv = document.createElement("div");
newDiv.innerText = "Hello World";
2. append() and appendChild()¶
Adds element to the end of a parent.
document.body.append(newDiv); // accepts text, multiple elements
parent.appendChild(newDiv); // older, only one node
prepend()¶
Adds to the start of a parent.
parent.prepend(newDiv);
3. insertBefore()¶
Inserts a node before another inside the same parent.
parent.insertBefore(newNode, referenceNode);
4. remove() (modern)¶
Removes an element directly.
element.remove();
5. removeChild() (older)¶
Used on the parent, passing the child to remove.
parent.removeChild(child);
6. replaceChild()¶
Replaces one child with another.
parent.replaceChild(newNode, oldNode);
7. Cloning Nodes¶
cloneNode(deep)¶
true→ clone entire element with childrenfalse→ only clone the node itself
let clone = original.cloneNode(true);
parent.append(clone);
8. Example: Add New List Item¶
let li = document.createElement("li");
li.innerText = "New Item";
document.querySelector("ul").appendChild(li);