Insert, Replace or Remove Child Elements in JavaScript

Insert, Replace or Remove Child Elements in JavaScript

There are quite a few situations where we need to work with child elements on a webpage. One such example would be a to-do list where you might want to insert new tasks or remove old tasks form the list. Another example would be an app that keeps track of the stocks a user has purchased.

In this tutorial, we will learn about some important methods that you can use to easily insert, remove or replace child elements in JavaScript.

Inserting Child Elements

A child element can be inserted at the beginning, at the end or somewhere in between all other children of a parent. In this section, I will show you how to insert a child element at any of those desired locations with ease.

Insert a Child Element at the End

Generally when you have to insert child elements, they have to be added at the end of the list after all other children. The appendChild() method works best in this case. This method returns the newly appended node as its value.

If the child that you want to append already exists in the document, then this method will move it from its current position and place it at the new position.

We will start with the following list of fruits:

1	<ol>
2	<li>Papaya</li>
3	<li>Mango</li>
4	<li>Banana</li>
5	<li>Apple</li>
6	<li>Guava</li>
7	</ol>

We will use the appendChild() method to add a new fruit to the bottom of the list. After that, we will move the fruit at the top of the list to bottom by using the same method.

1	let fruit_list = document.querySelector("ol");
2	let first_fruit = document.querySelector("li");
3	let new_fruit = document.createElement("li");
4
5	new_fruit.textContent = "Lichi";
6
7	// "Lichi" is added at the bottom.
8	fruit_list.appendChild(new_fruit);
9
10	// "Papaya" is moved to the bottom.
11	fruit_list.appendChild(first_fruit);

As I mentioned earlier, using appendChild() to append an existing node will move the node to its original location to the new position. That's exactly what happens with the first fruit on our list as it is moved to the bottom. The final HTML will look like this:

1	<ol>
2	<li>Mango</li>
3	<li>Banana</li>
4	<li>Apple</li>
5	<li>Guava</li>
6	<li>Lichi</li>
7	<li>Papaya</li>
8	</ol>

Inserting a Child Element Before or After a Particular Node

What if you don't want to add elements to the end of the list but before or after a particular element? For example, you might want to add Lichi to the list before or after Banana.

Adding a child element before a particular node is easy with the help of the insertBefore() method. It accepts two parameters. The first one is the child node that you want to insert. The second one is the node before which you want to insert the child node.

It is important to remember that this method requires both the parameters to work. However, you can set the value of second parameter to null to add the new node at the end of the list.

Let's use this method to insert a node before the third list element, Banana. The JavaScript will look something like this:

1	let fruit_list = document.querySelector("ol");
2	let third_fruit = document.querySelectorAll("li")[2];
3	let new_fruit = document.createElement("li");
4
5	new_fruit.textContent = "Lichi";
6
7	// Adds "Lichi" before "Banana"
8	fruit_list.insertBefore(new_fruit, third_fruit);

Using the following line will add Lichi at the end of the list.

1	fruit_list.insertBefore(new_fruit, null);

There is no method similar to insertBefore() that you can use to insert a child element after a particular node. However, we can emulate the same behavior with the help of the nextSibling property of a DOM Node.

1	let fruit_list = document.querySelector("ol");
2	let third_fruit = document.querySelectorAll("li")[2];
3	let new_fruit = document.createElement("li");
4
5	new_fruit.textContent = "Lichi";
6
7	fruit_list.insertBefore(new_fruit, third_fruit.nextSibling);
8	/*
9	<ol>
10	<li>Papaya</li>
11	<li>Mango</li>
12	<li>Banana</li><li>Lichi</li>
13	<li>Apple</li>
14	<li>Guava</li>
15	</ol>
16	*/

One important thing to remember here is that browsers insert text nodes into your documents to represent whitespace. As a result, using the nextSibling property will usually give you back this node. You can use the nextElementSibling property if you want to refer to the actual element node.

1	let fruit_list = document.querySelector("ol");
2	let third_fruit = document.querySelectorAll("li")[2];
3	let new_fruit = document.createElement("li");
4
5	new_fruit.textContent = "Lichi";
6
7	// #text "\n "
8	console.log(third_fruit.nextSibling);
9
10	// <li>
11	console.log(third_fruit.nextElementSibling);
12
13	fruit_list.insertBefore(new_fruit, third_fruit.nextElementSibling);
14	/*
15	<ol>
16	<li>Papaya</li>
17	<li>Mango</li>
18	<li>Banana</li>
19	<li>Lichi</li><li>Apple</li>
20	<li>Guava</li>
21	</ol>
22	*/

Insert a Child Element at the Beginning

We can also use the insertBefore() method to insert a child element as the first child of the parent. This requires the use of the firstChild property. We use the child node returned by the firstChild property as the second parameter to the insertBefore() method and our new node is inserted before the original first child which will now become the second child.

Here is an example:

1	let fruit_list = document.querySelector("ol");
2	let new_fruit = document.createElement("li");
3
4	new_fruit.textContent = "Lichi";
5
6	fruit_list.insertBefore(new_fruit, fruit_list.firstChild);
7	/*
8	<ol>
9	<li>Lichi</li>
10	<li>Papaya</li>
11	<li>Mango</li>
12	<li>Banana</li>
13	<li>Apple</li>
14	<li>Guava</li>
15	</ol>
16	*/

Replace Child Elements

You can use the replaceChild() method if you want to replace a child node with a new node within a parent. This method also accepts two parameters. The first parameter is the replacement node while the second parameter is the old node that you want to replace.

1	let fruit_list = document.querySelector("ol");
2	let third_fruit = document.querySelectorAll("li")[2];
3	let new_fruit = document.createElement("li");
4
5	new_fruit.textContent = "Lichi";
6
7	fruit_list.replaceChild(new_fruit, third_fruit);
8	/*
9	<ol>
10	<li>Papaya</li>
11	<li>Mango</li>
12	<li>Lichi</li>
13	<li>Apple</li>
14	<li>Guava</li>
15	</ol>
16	*/

Let's say the replacement node already exists somewhere within the DOM. In this case, it will be first removed from its original location before being used as a replacement.

1	let fruit_list = document.querySelector("ol");
2	let first_fruit = document.querySelector("li");
3	let last_fruit = document.querySelector("ol").lastChild;
4
5	fruit_list.replaceChild(first_fruit, last_fruit);
6	/*
7	<ol>
8	<li>Mango</li>
9	<li>Banana</li>
10	<li>Apple</li>
11	<li>Guava</li>
12	<li>Papaya</li>
13	</ol>
14	*/

Remove Child Elements

Removal of child elements from a DOM node is also relatively easy due to the removeChild() method. This method accepts a single parameter which refers to the child node that you want to remove. The return value of this method is the removed node.

Let's use this method to remove a fruit from our list that has been eaten by someone.

1	let fruit_list = document.querySelector("ol");
2	let third_fruit = document.querySelectorAll("li")[2];
3
4	fruit_list.removeChild(third_fruit);
5	/*
6	<ol>
7	<li>Papaya</li>
8	<li>Mango</li>
9	<li>Apple</li>
10	<li>Guava</li>
11	</ol>
12	*/

As long as you have a reference to the removed child in your code, you can add it back to the DOM as shown below or reuse it in a different way. Otherwise, the removed element will be erased form the memory after a short time.

The following code will add the banana at the end of our list.

1	let fruit_list = document.querySelector("ol");
2	let third_fruit = document.querySelectorAll("li")[2];
3
4	fruit_list.removeChild(third_fruit);
5	fruit_list.appendChild(third_fruit);
6
7	/*
8	<ol>
9	<li>Papaya</li>
10	<li>Mango</li>
11	<li>Apple</li>
12	<li>Guava</li>
13	<li>Banana</li>
14	</ol>

Final Thoughts

In this tutorial, we learned how to insert, replace or remove child elements of a parent using pure JavaScript. JavaScript provides the replaceChild() and removeChild() methods to easily do replacements and removals. Insertions are also very easy with the help of the insertBefore() method but you have to get a bit clever with your approach if you want to use the method to insert your element after a particular child or as the first child.