Adding and Removing Nodes

The following methods in the Node interface allow you to add and remove nodes from the DOM.  These methods throw errors if called on a node that does not accept children.

We’ll use the following HTML in the examples below.

<div id="container">
    <div id="one" class="box blue-box">One</div>
    <div id="two" class="box pink-box">Two</div>
    <div id="three" class="box pink-box">Three</div>
</div>

Node.appendChild(node)

The appendChild(node) method takes a node as an argument and adds the node to the end of the calling node’s childNodes list and returns the new node.  If the argument is already in the DOM, it is removed from its old location and inserted into its new location.

Below, we change the order of the boxes by moving appending the childNodes list with the node of the first box.

One
Two
Three
 var container = document.getElementById("container");
var firstChild = container.querySelector(".box");
container.appendChild(firstChild);

In the example code below, we extend append the childNodes list with a clone of the first box (the blue box).

One
Two
Three
 var container = document.getElementById("container");
 var firstChild = container.querySelector(".box");
 var clone = firstChild.cloneNode(true);
 container.appendChild(clone);

Node.insertBefore()

The insertBefore(node1, node2) method takes two nodes as arguments and inserts node1 before node2 in the DOM. If node2 is null, node1 is appended to the end of the list.

Below we extend the list by cloning the first box and inserting it before the last child node.

One
Two
Three
 var container = document.getElementById("container");
var firstChild = container.querySelector(".box");
var clone = firstChild.cloneNode(true);
var lastChild = container.querySelector(".box:last-of-type");
container.insertBefore(clone, lastChild);

Node.replaceChild()

The replaceChild(node1, node2) method takes two nodes as arguments and replaces the second node with the first.  If the first node already exists in the Dom, it is removed.  The reference to the node that is replaced is returned.

This next example, clones the blue box and replaces the first pink box found with the clone.

One
Two
Three
 var container = document.getElementById("container");
var blueBox = container.querySelector(".blue-box");
var clone = blueBox.cloneNode(true);
var pinkBox = container.querySelector(".pink-box");
if (pinkBox != null) {
    container.replaceChild(clone, pinkBox);
}

Node.removeChild()

The removeChild(node) takes a node as an argument and removes the node from the DOM.  The reference to the node that was removed is returned.

This example, removes the first pink box found.

One
Two
Three
 var container = document.getElementById("container");
var pinkBox = container.querySelector(".pink-box");
if (pinkBox != null) {
    container.removeChild(pinkBox);
}

Element.innerHTML

The Element.innerHTML property allows you to retrieve and modify the HTML code for the subtree below an element.  If the innerHTML property is modified, all of the existing child nodes are deleted and new nodes are created for the new HTML code. This allows us to modify the DOM using HTML.

In the following example we code the button hander so that it checks the length of the innerHTML property of the div.  If it’s zero, it modifies the div’s innerHTML property to hold the HTML for three boxes.  It the div’s innerHTML property has a length greater than zero, it sets the div’s innerHTML property equal to the empty string, effectively deleting the boxes.

One
Two
Three
 var boxCon = document.getElementById("container6");
 if (boxCon.innerHTML.length == 0) {
     boxCon.innerHTML = "<div id='one' class='box blue-box'>One</div><div id='two' class='box pink-box'>Two</div><div id='three' class='box pink-box'>Three</div>";
 }
 else {
     boxCon.innerHTML = "";
 }

© 2018 – 2020, Eric. All rights reserved.