In the last lesson, we introduced the concept of the DOM tree, and discussed how to select elements according to their ids, classes, names and element tags. And now, it is time to talk about how to manipulate the selected elements.
Altering the selected element
Let's start by talking about how to change a selected element.
Altering content
There are two properties available for altering the content of an element, innerHTML for all types of content, and textContent for textual content only.
innerHTML
The innerHTML property accesses the HTML content of an element. For example,
1<body>
2 <div id="parent">
3 <p id="first">Lorem ipsum dolor sit. . .</p>
4
5 <p id="second">
6 Quidem molestiae distinctio quae, <a href="">necessitatibus</a> deserunt
7 dignissimos. . .
8 </p>
9 </div>
10
11 <script src="index.js"></script>
12</body>1let first = document.getElementById("first");
2console.log(first.innerHTML);
3
4let second = document.getElementById("second");
5console.log(second.innerHTML);
Notice that the result will be printed as a string. Even though #second has a child node (<a>), it is not treated as a node in this case.
You can use the innerHTML property to assign new content for the selected element.
1let first = document.getElementById("first");
2first.innerHTML = "This content is changed by JavaScript.";
The HTML content can be assigned as well.
1let second = document.getElementById("second");
2second.innerHTML =
3 "This content is changed by JavaScript. <a href=''>This link is changed by JavaScript as well.</a>";
However, this method of creating HTML nodes is generally not recommended, because it is likely that your code editor will not provide syntax highlighting, and it might lead to mistakes.
Later, we are going to introduce a more JavaScript way to create new HTML elements.
textContent
If you are only dealing with textual content, you can opt to use the textContent property instead.
1let first = document.getElementById("first");
2first.textContent = "This content is changed by JavaScript.";Altering attribute
You are also allowed to programmatically change attributes using JavaScript. For example, let's say you have an image element:
1<img id="image" src="image.png" />You can change the image source by setting the src attribute like this:
1let image = document.getElementById("image");
2
3image.src = "new_image.png";You may also add new attributes to the selected element using the setAttribute() method.
1let image = document.getElementById("image");
2
3image.src = "new_image.png";
4image.setAttribute("alt", "This is an image.");Altering style
There are generally two ways to change the styles of an element in frontend development. You can either change the styles directly, or change the class.
The styles of an element can be altered directly by specifying the style name. For example,
1<body>
2 <div id="parent">
3 <p id="first">Lorem ipsum dolor. . .</p>
4
5 <p id="second">. . .</p>
6
7 <p id="third">. . .</p>
8 </div>
9
10 <script src="index.js"></script>
11</body>1let first = document.getElementById("first");
2
3first.style.color = "blue";
Changing the class attribute is also a commonly used technique, but the reason that we did not discuss it in the change attribute section is that it works differently compared to other attributes. Since class is a special keyword in JavaScript, and to avoid conflicts, you need to use either className or classList.
The className property is a setter, which means you can set the class by assigning a string directly.
1<body>
2 <div id="parent">
3 <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
4
5 <p id="second" class="blue bold">. . .</p>
6
7 <p id="third" class="red underline">. . .</p>
8 </div>
9
10 <script src="index.js"></script>
11</body>1.blue {
2 color: blue;
3}
4
5.red {
6 color: red;
7}
8
9.underline {
10 text-decoration: underline;
11}
12
13.bold {
14 font-weight: 700;
15}1let first = document.getElementById("first");
2
3first.className = "red underline bold";
On the other hand, classList is read-only. You cannot edit it directly and must use the add() or remove() methods instead.
1let first = document.getElementById("first");
2
3first.classList.remove("blue");
4first.classList.add("red");
5first.classList.add("bold");Adding new elements
Adding new elements to the DOM tree is slightly more complicated, as it usually takes four steps:
- Create an element node.
- Create a text node if the element needs one.
- Attach the text node as the child of the element.
- Insert the element node into the DOM tree.
In this section, we'll explain each of these steps one by one. Assuming this is your HTML document:
1<body>
2 <div id="parent">
3 <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
4
5 <p id="second" class="blue bold">. . .</p>
6
7 <p id="third" class="red underline">. . .</p>
8 </div>
9
10 <script src="index.js"></script>
11</body>Creating element and text nodes
First of all, to create a new element node, you need to use the createElement() method.
1let p = document.createElement("p");Next, to create and attach a text node, you can either use a createTextNode() method:
1let text = document.createTextNode(
2 "This paragraph is created with JavaScript."
3);And then append the text node to the paragraph node we just created.
1p.appendChild(text);Or simply use the innerHTML or textContent properties we discussed before.
1p.innerHTML = "This paragraph is created with JavaScript.";1p.textContent = "This paragraph is created with JavaScript.";Inserting nodes to DOM tree
Lastly, to insert the new paragraph into the DOM tree, you have a few options.
append()andappendChild(): append as child
The append() and appendChild() methods both insert a new node after the last child of the selected element. For example,
1<div id="parent">
2 <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
3
4 <p id="second" class="blue bold">. . .</p>
5
6 <p id="third" class="red underline">. . .</p>
7</div>1let parent = document.getElementById("parent");
2// parent.append(p);
3parent.appendChild(p);Both append() and appendChild() should give the same result:
1<div id="parent">
2 <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
3
4 <p id="second" class="blue bold">. . .</p>
5
6 <p id="third" class="red underline">. . .</p>
7 <p>This paragraph is created with JavaScript.</p>
8</div>Their difference is that append() allows you to append multiple nodes, whereas appendChild() can only append one.
1let parent = document.getElementById("parent");
2parent.append(p1, p2);prepend(): prepend as child
The prepend() method inserts a new node before the first child of the selected element. For instance,
1let parent = document.getElementById("parent");
2parent.prepend(p);1<div id="parent">
2 <p>This paragraph is created with JavaScript.</p>
3 <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
4
5 <p id="second" class="blue bold">. . .</p>
6
7 <p id="third" class="red underline">. . .</p>
8</div>There isn't a prependChild() method available.
before()andinsertBefore(): insert before as sibling
The before() method inserts one or more nodes before the selected element.
1let parent = document.getElementById("parent");
2parent.before(p);1<p>This paragraph is created with JavaScript.</p>
2<div id="parent">
3 <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
4
5 <p id="second" class="blue bold">. . .</p>
6
7 <p id="third" class="red underline">. . .</p>
8</div>The insertBefore() method inserts the new node before the reference node, under the selected parent node. For example,
1let parent = document.getElementById("parent");
2parent.insertBefore(p, parent.children[1]);In this case, parent is selected as the parent node. The second child element of parent (parent.children[1]) is used as the reference node. The new element p will be inserted before that reference node.
1<div id="parent">
2 <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
3
4 <p>This paragraph is created with JavaScript.</p>
5 <p id="second" class="blue bold">. . .</p>
6
7 <p id="third" class="red underline">. . .</p>
8</div>There aren't any methods available for you to insert a node after as a sibling, because this action may be emulated by combining the insertBefore() method with nextSibling. For instance,
1parent.insertBefore(p, parent.children[1].nextSibling);1<div id="parent">
2 <p id="first" class="blue underline">Lorem ipsum dolor. . .</p>
3
4 <p id="second" class="blue bold">. . .</p>
5 <p>This paragraph is created with JavaScript.</p>
6
7 <p id="third" class="red underline">. . .</p>
8</div>replaceChild()andreplaceWith(): replace an element
Lastly, you can replace existing elements with a new element. The replaceChild() method takes two arguments, the new child and the old child. It will replace the old one with the new one. For example,
1let parent = document.getElementById("parent");
2let second = document.getElementById("second");
3
4parent.replaceChild(p, second);1<div id="parent">
2 <p id="first" class="blue underline">. . .</p>
3
4 <p>This paragraph is created with JavaScript.</p>
5
6 <p id="third" class="red underline">. . .</p>
7</div>The replaceWith() method replaces the selected node with the new element.
1let second = document.getElementById("second");
2
3second.replaceWith(p);Removing elements
To remove an element, use the remove() method.
1let second = document.getElementById("second");
2
3second.remove();To remove the child of a selected element, use removeChild().
1let parent = document.getElementById("parent");
2
3parent.removeChild(parent.children[1]);