DOM Manipulation: Creating,
(Re)Moving, and Accessing
Elements
Lecture 8
Today’s Agenda
● Creating, adding, and removing elements (oh my!)
● Moving elements around
Editing Text in an Element:
textContent vs. innerHTML
Short answer? Separation of Concerns.
Long answer? It's complicated.
Creating, Adding, and Removing DOM
Elements
<body> QUESTION:
What does this look like to you?
<header> <main>
<p> <section> <section>
Hello
<ol> <p>
World
dolor sit
<html> <span>
<html> amet ...
<li> ...
Lorem
ipsum
Creating New Elements
Name Description
document.createElement(“tag”) creates and returns a new empty DOM node
representing an element of that type
// create a new <h2> node
let newHeading = document.createElement("h2");
newHeading.textContent = "This is a new heading!";
Note: Merely creating an element does not add it to the page
You must add the new element as a child of an existing element on the page...
Adding Nodes to the DOM
When you have a parent DOM node, you can add or remove a child DOM node using the following
functions:
Name Description
parent.appendChild(node) Places the given node at the end of this node’s child list
parent.insertBefore(new, old) Places the given node in this node’s child list just before
old child
parent.replaceChild(new, old) Replaces given child with new nodes
parent.insertAdjacentElement(location, Inserts new element at given location relative to parent
new)
let li = document.createElement("li");
li.textContent = "A list item!";
id("my-list").appendChild(li);
Removing Nodes from the DOM
When you have a parent DOM node, you can remove a child DOM node using the following functions
Name Description
parent.removeChild(node) Removes the given node from this node’s child list
node.remove() Removes the node from the page
qs("#my-list li:last-child").remove();
/* or */
let li = qs("#my-list li:last-child");
li.parentElement.removeChild(li);
An Aside
One more alias function!
When creating new DOM elements using JS, you may use document.createElement often.
We have added one more alias function, gen to include with id, qs, and qsa.
function gen(tagName) {
return document.createElement(tagName);
}
Moving Elements Around
Moving Nodes around the DOM
When you have a parent DOM node, you can add or remove a child DOM node using the following
functions
Name Description
parent.appendChild(node) Places the given node at the end of this node’s child list
parent.insertBefore(new, old) Places the given node in this node’s child list just
before old child
parent.replaceChild(new, old) Replaces given child with new nodes
parent.insertAdjacentElement(location, Inserts new element at given location relative to parent
new)
DOM Traversal Methods
We can use the DOM tree to traverse parent/children/sibling relationships (e.g. to remove an element
from its parent node). Every node's DOM object has the following (read-only) properties to access
other DOM nodes in the tree:
Name Description
firstElementChild, lastElementChild start/end of this node’s list of children elements
children Array of all of this node’s children (not the same as
childNodes, which includes text)
nextElementSibling, Neighboring element nodes with the same parent,
previousElementSibling skipping whitespace nodes
parentNode (parentElement) The elements that contain the node
These are the common traversal properties we’ll see, but you can find a complete list here
Example
Scrambled: scrambled.html
DOM Tree Traversal Example
<div id="container"> id("container").children; // [#column1, #column2]
<div id="column1">
<div>1</div> id("column1").firstElementChild;
<div id="box2">2</div> id("container").firstElementChild.firstElementChild;
<div>3</div> id("box2").previousElementSibling;
</div> // all three ways to get <div>1</div>
<div id="column2">
<div>4</div> id("box2").nextElementSibling; // <div>3</div>
<div>5</div>
<div>6</div> id("column2").lastElementChild; // <div>6</div>
</div>
</div> id("box2").parentNode.parentNode; // #container
Skittles
Today, we’ll access DOM elements and manipulate text and class names on this Skittles
page
