Here’s the basic idea.
The reason for this is because you have to select an element to append your new element to. You can append it to the body, the head, or other element. So we start this off with the assumption that we have a div with the id of inner_content.
Let’s say we want to add another div with some text inside of it. So, we now create the new div, and append it to our main_div variable.
This div needs some attributes! So let’s hop into that, the above snippet turns into:
Now we need to actually attach this item to our old div.
To do that we simply tell our main_div to append a child:
Now, say we want to add a text node… now that gets its own special tool.
And now, just like before, we need to attach that to an item it belongs to.
Now, we end up with our code snippet looking something like this:
And that’s about as easy as it gets.
Hope this helps someone understand the order that is required when appending new children to the node list.
For more information: