Posted on Feb 23, 2020

How to insert a div after another div in Javascript

#javascript #opensource #100daysofcode

Hello everyone! I've been trying to make sense of what I'm learning to be frank. Because honestly, this topic started out innocent but it grew to be what I'd described to be advanced, at least for me.

Upon first reading the title, I would have thought it was easy enough to do. However, it actually took me quite a while to understand it. Now, I'm going to attempt to explain it.

When I initially googled the above, it took me to this Stackoverflow question.

As you can see, the first function they recommended was insertBefore(). Initially I thought, okay sure, I'm pretty sure they have insertAfter() but don't ask me why I did not attempt to do it through that function.

(Also, as a side note, I'm not sure if "function" is the right terminology for Javascript. It could be method. This is an excuse, I'm sorry!)

Anyways, there is in fact, an insertAfter() function in Javascript. Here it is. So this post could be entirely misleading. It may not be best practice, but I treated this as a learning point.

This will be the desired outcome. The idea of the structure is that there is a bigger, encapsulating div (dark blue, pictured above) with all the little todo items inside.

So it's this structure.



<div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>

Convey the above structure in code and we have this.

Do keep in mind that the todolist items will be 100% added via Javascript. This includes the element, alongside the attributes like the classes. The above are just the title and the input fields.

So, back to the question at hand. How are we going to add todo items inside this list?

Let's take a look at how insertBefore() works. Going to this website, you see this.

Here's the syntax for usage.

As you can see, the definition states that it will insert a node as a child, which is perfect for our situation.

Also, I came across this solution.

The first code in that link shows a lot of similarities to how insertBefore() works. However, the slight catch is that we have a "referenceNode" created.

We want to add a node after the latest node. So, what this "referenceNode" does is to keep track of the latest node.

This is what I have in my code currently.



var referenceNode = document.getElementsByClassName('category-title')[0];

Let's take a step back. Our main div is "category-panel". If we were to count the number of child divs inside the main div, "category-title" would be the first and the latest. So it makes sense to have the "referenceNode" as the "category-title" div.

Remember how I said we were going to add the todo items through Javascript? So how do I keep track of the items?

I use an array. For now.



var todoList = ["Do laundry", "Hello", "It's me"];

So, the plan is to loop through this array and display each item when the page reloads.

Currently, this is what I have.

From the code above, I checked first if the todo list is empty. I made the "category-title" div as the reference node when looping the array for the first time.

However, where it gets interesting is when there is already one todo item displayed. For that we would have to change the reference node. This makes every latest todo item to be displayed the reference node.

How do we check which is the latest todo item?

Well, for every todo item, I have added a class attribute called "category-item". So I get all elements with said class name and count the length, which is the number of elements with said class name.



document.getElementsByClassName("category-item")[childrenCount-1];

To access the latest, I used an all-familiar array syntax, except I did "childrenCount - 1". We are always starting from 0 so it makes sense to subtract one off the length to access the real index.

So then, what's up with this?

This is the same code that insertBefore() works with. What's different is that we are centering the code around the reference node.



referenceNode.parentNode

Remember the definition of insertBefore()? Well, since we are using the reference node, which is a child node, this is how we access its parentNode.



.insertBefore(divNode, referenceNode.nextSibling);

Remember that insertBefore() needs to know the parent node, the new child node and also the reference child node to put other elements before it.



referenceNode.nextSibling

This means we are refering to the "about-to-be" or "future" next node. This is going to be a null node but insertBefore() accounts for that. Through this code, insertBefore() now knows all 3 requirements. This is a workaround in my opinion. But it works.

With this implementation, you could interpret insertBefore() as "inserting a node as a child right before a non-existing child". Technically it does not exist but this function accounts for null nodes. So, it works.

*NOTE: Just a slight disclaimer, I could have done this multiple different ways but I'd just like to emphasize that I encountered this situation and tried the first solution. Just wanted to get that out of the way.

So, that is how it works. It's an information overload for me initially but I hope my post sheds a little bit of light on it.

Thanks!