Objective

Redefine the replaceChild() method using other methods of the Node interface.

Difficulty

Easy

Description

As we learnt in the previous HTML DOM — The Node Interface chapter, the Node interface's replaceChild() method allows us to replace a given node with another node in a document.

The new node is provided as the first argument to the method whereas the previous node is provided as the second argument. As the name suggests, the method itself is called on a node whose child we want to replace.

In the same chapter, we also learnt about the insertBefore() and the removeChild() method.

In quick words, insertBefore() allows us to insert a given node right before another node while removeChild() allows us to remove a given node.

In this exercise, you have to redefine replaceChild() solely in terms of insertBefore() and removeChild().

In a real program, there is absolutely no need of this redefinition — we're better off with the native implementation of the method. The purpose of this exercise is only to refine your knowledge about the Node interface.

View Solution

New file

Inside the directory you created for this course on JavaScript, create a new folder called Exercise-38-Redefining-replaceChild() and put the .html solution files for this exercise within it.

Solution

When replaceChild() is called on an element node, it removes the old node and adds the new node in place of it.

For us, this means one thing:

  • We could remove the old node first and then add the new node.
  • We could add the new node first and then remove the old node.

As soon as we go over both these choices, we see that the first one is totally meaningless. If we remove the old node first, there will be no way for us to know where to add the new node. Hence, there is no point of this choice.

Talking about the second choice, we can easily add the new node first by inserting it before the old node and then removing this old node.

Thus, we get to the following implementation of replaceChild() based on the second choice:

Node.prototype.replaceChild = function(newNode, oldNode) {
   this.insertBefore(newNode, oldNode);
   this.removeChild(oldNode);
}

Let's test this redefined method on the same example that we tested replaceChild() on, in the previous chapter.

In the code below, we replace the <p> element with an <h3> element:

<div id="main">
   <h1>A heading</h1>
   <p>A paragraph</p>
</div>
Node.prototype.replaceChild = function(newNode, oldNode) {
   this.insertBefore(newNode, oldNode);
   this.removeChild(oldNode);
}

var h3Element = document.createElement('h3');
h3Element.innerHTML = 'Another heading';

var mainElement = document.getElementById('main');

// Replace the <p> element with an <h3>.
mainElement.replaceChild(h3Element, mainElement.childNodes[3]);

Live Example

Clearly, our redefined replaceChild() method works just like the native one.

If we want to be 100% sure that it's our implementation of replaceChild() that's being called in line 12, and not the native replaceChild(), we can add a simple log statement in our replaceChild() method, and then note any logs upon invoking the method in line 12.

If we do note any logs, it means that what's executing in the background is indeed our own method.

And this completes our exercise.