Whenever we use lists (either Unordered-ul or ordered-<ol>) in html, in most of the cases there comes a need to add dynamic elements at the end of the list. This is achieved using javascript or jquery. Jquery being a fast and commonly used JS library becomes our obvious choice now-a-days.
So here I am going to tell you how to add new list items to the end of the list dynamically using jquery.
There can be numerous solutions to the same problem in a programming world, and this above problem can also be done in different ways. I am going to tell you the most commonly used ways to add the list item using jquery.
1) append method :
As the name says, the append method is used to append an element to the end of the list. It places the new element at the last position of the list(ul or <ol>).
For ex:- Here I am adding dynamic elements to an unordered list(ul) on the click of a button.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var dataLength = $("ul li").length;
var num=dataLength;
$("#appendItem").click(function(){
num++;
$("#listItems ul").append('<li>Item num '+num+' </li>');
});
});
</script>
</head>
<body>
<div id="listItems">
<ul>
<li>Item num 1</li>
<li>Item num 2</li>
</ul>
</div>
<button id="appendItem">Append Items at the end of the List</button>
</body>
</html>
Here append method adds a new dynamic element at the end of the list everytime i click on the button.
2) after method:
As we are aware that the after method is used to insert specified content after the selected elements. Thus we can use this method to insert the new list element after the last existing li element.
i.e
$(document).ready(function(){
var dataLength = $("ul li").length;
var num=dataLength;
$("#appendItem").click(function(){
num++;
$("#listItems ul li:last").after('<li>Item num '+num+' </li>');
});
});
In the above code we selected the last li element in the ul using $("#listItems ul li:last") and then we inserted our new dynamically generated li using after method.
3) insertAfter method:
this method also performs the same task as done by after method. The difference comes in its syntax i.e the difference between them is the way they are used. In this method the new element that is to be inserted to the existing list is preceded before the insertAfter method & the position where the element is to be inserted is passed as an argument to the method.
$(document).ready(function(){
var dataLength = $("ul li").length;
var num=dataLength;
$("#appendItem").click(function(){
num++;
$('<li>Item num '+num+' </li>').insertAfter('#listItems ul>li:last');
});
});
0 Comment(s)