Often in JavaScript a developer will want to reorganize a list of elements, moving the first element to the end of the list or the last element to the front of it.
This is particularly important for creating circular content sliders, which give users the illusion that the associated elements never end. To help with this, JavaScript provides an appendChild() method that can be used to reposition the first element in a list or group to the end of that list or group. However—in spite of a significant number of Google searches—I'm not aware of a prependChild() method that does the reverse.
In this post, I will briefly describe how you can use appendChild and demonstrate an alternative to the mythical prependChild() method.
Understanding the Use Case
I want to make sure that the possible use case for appending and pre-pending elements is clear.
Imagine that you are creating a custom slider with two big buttons identified as "previous" and "next." When a user clicks on "next," your slider is repositioned, exposing the next element. But what happens if the user continues to click "next?" Eventually, there might not be another element, so either the "next" button will stop working, or you need your code to move the first item in your list to the last position.
Likewise, what if the user clicks "previous" first? There probably isn't a previous element, so what will your JavaScript do? How about getting the last element in the list and adding it to the front? That would be pre-pending.
appendChild()
To demonstrate appendChild(), I put together a little bit of HTML. The key here is that I have an element, "content," with four child elements.
<!doctype html> <html lang="en"> <head> <title>Title</title> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="style.css"> <link type="text/css" rel="stylesheet" href="960.css"> <link type="text/css" rel="stylesheet" href="reset.css"> <link rel="icon" type="image/png" href="favicon.png"> </head> <body> <div class="container_12" id="wrapper"> <div class="grid_12" id="content"> <p id="element1" class="grid_3">element 1</p> <p id="element2" class="grid_3">element 2</p> <p id="element3" class="grid_3">element 3</p> <p id="element4" class="grid_2">element 4</p> </div><!--end content--> </div><!--end wrapper--> <script src="js.js"></script> </body> </html>
Notice the order of the elements: 1, 2, 3, and 4.
My JavaScript will identify the "content" element; create a variable to represent the "content" element's children; and then move the first child to the end of the line.
var theParent = document.getElementById('content'); //get the parent
var theKids = theParent.children; //find the child elements
theParent.appendChild(theKids[0]); //reposition the first child element
The result is that the elements are reordered to 2, 3, 4, and 1.
In the context of a larger script, I could use this to create the circular content slider described above. In fact, in a recent Ecommerce Developer article, I used this very technique to make a circular product merchandiser.
The Mythical prepend()
Unfortunately, if I wanted to rearrange the elements so that the last item moves to the front, there is not a prepend() method to use. Rather, I suggest insertBefore(), which requires the element you want to insert and the element you want to put it in front of. Here is what the JavaScript looks like.
var theParent = document.getElementById('content');
var theKids = theParent.children;
var num = theKids.length - 1;
theParent.insertBefore(theKids[num], theParent.firstChild);
Now the order is 4, 1, 2, and 3. Notice that I made insertBefore() a method of theParent, and that I provided the element I wanted to reposition, theKids[num], and the element I wanted that element in front of, theParent.firstChild.
You should also notice that I needed to find out how many child elements existed, theKids.length, and then subtract one to compensate for zero-based counting. I could not have used lastChild.
Summing Up
There you have it, you can use appendChild and insertBefore to reorganize lists or groups of elements. These techniques are the secret to creating circular content sliders.
