jQuery : The append() and prepend() methods

Adding new stuff to existing elements is very easy with jQuery. There are methods for appending or prepending, taking HTML in string format, DOM elements and jQuery objects as parameters. In the next example, you will see how easy it is to insert new elements in a list, using both the append() and the prepend() method:

<a href="javascript:void(0);" onclick="$('#olTestList1').append('<li>Appended item</li>');">Append</a>    
<a href="javascript:void(0);" onclick="$('#olTestList1').prepend('<li>Prepended item</li>');">Prepend</a> 
 
<ol id="olTestList1"> 
        <li>Existing item</li> 
        <li>Existing item</li> 
</ol>

We have to links: The first will append an item to the list, meaning that the new item will be inserted as the last item. The other link will prepend a link to the list, which means that the new item will be inserted as the first item of the list. In this example, we simply insert a piece of HTML, but we could have generated the new items with jQuery as well, or created it through regular JavaScript code and DOM elements. In fact, both the append() and the prepend() method takes an infinite amount of new elements as parameters. In the next example, we will demonstrate this as well as the ability to add elements in various forms:

<a href="javascript:void(0);" onclick="AppendItemsToList();">Append items</a>    
<ol id="olTestList2"></ol> 
 
<script type="text/javascript"> 
function AppendItemsToList() 
{ 
        var item1 = $("<li></li>").text("Item 1"); 
        var item2 = "<li>Item 2</li>"; 
        var item3 = document.createElement("li"); 
        item3.innerHTML = "Item 3"; 
         
        $("#olTestList2").append(item1, item2, item3); 
} 
</script>

As you can see, item1 is a jQuery generated element, item2 is a simple HTML string and item3 is a JavaScript DOM generated element. They are all appended to the list using the same call and of course this would have worked for the prepend() method too.

There are variations of the append() and prepend() methods, called appendTo() and prependTo(). They do pretty much the same, but they do it the other way around, so instead of calling them on the elements you wish to append/prepend to, with a parameter of what is to be appended/prepended, you do the exact opposite. Which to use obviously depends on the situation, but here's an example showing you how to use them both:

<a href="javascript:void(0);" onclick="PrependItemsToList();">Prepend items</a>    
<ol id="olTestList3"></ol> 
 
<script type="text/javascript"> 
function PrependItemsToList() 
{        
        $("#olTestList3").prepend($("<li></li>").text("prepend() item")); 
        $("<li></li>").text("prependTo() item").prependTo("#olTestList3"); 
} 
</script>

In this example, we prepend the items, but you could of course do the exact same using append() and appendTo(). As you can see, the result is the same - only the order of what we do differs.

SHARE