Move and Remove Nodes

Apart from using the DOM api to find nodes, you can also use it to move and remove nodes. Each node has a method called removeChild which removes a childnode from the parent. You need to pass the childnode that you want to remove to this method. If successful, the childnode will be removed from the DOM. This function returns the removed childnode.

<!doctype html>
<html>
  <head>
    <title>My title</title>
  </head>
  <body>
    <h1>A heading</h1>
    <a href="www.altcademy.com">Link text</a>
    <p>Hello World!</p>
    <p class="note">Note</p>
    <div>
      <p class="note" id="note1">Note 1</p>
      <p class="green note" id="note2">Note 2</p>
    </div>
    <button onClick="removeNote2()">
      remove note2
    </button>
  </body>
</html>

var div = document.getElementsByTagName('div')[0];
var note2 = document.getElementById('note2');

var removeNote2 = function () {
  if (note2) {
    div.removeChild(note2);
  }
}

Try it out on Repl.

appendChild

Apart from remove a child, we can also add a new node into a parent node using the appendChild method. Since we used a variable to hold on to note2, we can append it back to the div element.

<!-- Add the following to the html file -->
<button onClick="appendNote2()">
  append note2
</button>

// Add to js file
var appendNote2 = function () {
  div.appendChild(note2);
}

Notice that if you try to click the append note2 button when note2 is still in the DOM, it will not create a new note2 node. A unique node in the DOM will only ever exist in one place, moving the note2 node with appendChild will remove it from its original position and insert it to the end of the new parent node. So when you click the append note2 button, it repeats this process. Since note2 is already at the end of the div element, it gets removed and inserted there again, as if nothing has happened. We can exemplify this behavior by adding another function that will append note1 to the end of div, so you can swap the two in turn.

<!-- Add the following to the html file -->
<button onClick="appendNote1()">
  append note1
</button>

// Add to js file
var note1 = document.getElementById('note1');
var appendNote1 = function () {
  div.appendChild(note1);
}

Try it on Repl.

insertBefore

Since there is an appendChild method, you would normally expect there to be a similar method that adds a node as the first child of a parent node. But there isn't a method like that. Instead, you are given a method called insertBefore which accepts two node arguments. It will insert the second node argument in front of the first node argument. We should call the insertBefore method on the parent node of the childnodes we want to manipulate. If the second node argument (referenceNode) is null, the method will insert the first node argument at the end of the child nodes, the same behavior as appendChild.

<!-- Add the following to the html file -->
<button onClick="insertNote2BeforeNote1()">
  insert note2 before note1
</button>

// Add to js file
var insertNote2BeforeNote1 = function () {
  div.insertBefore(note2, note1);
}

Just because the DOM api doesn't provide a prependChild method, doesn't mean we can't write our own. We can use the insertBefore method to emulate a prependChild method.

// Add to js file
var prependChild = function (newNode) {
  this.insertBefore(newNode, this.firstChild);
}

var prependNote2 = function () {
  prependChild.call(div, note2);
}

<!-- Add the following to the html file -->
<button onClick="prependNote2()">
  prepend note2
</button>

Try it on Repl.

Note: The Web API standard is working on new methods such as prepend and append which will let you add multiple nodes into a parent node in one method call. These methods are still in experimental stage and are only compatible on some internet browsers.

replaceChild

Sometimes you might want to replace a node with a new node, or an existing node. For this, you can use the replaceChild method. It accepts two arguments, the first being the new node, the second is the old node you are replacing.

<!-- Add the following to the html file -->
<button onClick="replaceNote3WithNote2()">
  replace note3
</button>
<button onClick="appendNote3()">
  append note3
</button>

// Add to js file
var note3 = document.getElementById('note3');
var replaceNote3WithNote2 = function () {
  div.replaceChild(note2, note3);
}
var appendNote3 = function () {
  div.appendChild(note3);
}

Try it on Repl.

Move and Remove Nodes