In this tutorial we will learn how to Add last li tag to the list with jQuery. For this we can use jQuery append() method which adds HTML elements to the end of HTML tags.
Table of Contents
jQuery append() method
jQuery append() method adds HTML tag or HTML content to the end of selected HTML element.
In this example append() method is used to add last list item to the ul tag.
HTML Code
HTML Code is given below, in this code we have a ul list with three list items. HTML button tag is used to execute a function to add li tag at the end of list.
Input tag will take the last list item from the user as input.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Add li tag to the end of list</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input type="text" id="li">
<button id="btn">Add Last Li</button>
<script src="script.js"></script>
</body>
</html>
JQuery Code
JQuery Code is given below, jQuery click() method is used to trigger a function on a click of button.
$('#btn') is an id selector which will select the button tag.
$('#li') will target or select the input tag.
jQuery val() method is used to get the list item text from input tag.
In the end append() method will add last list item to the list.
This is dynamic way of adding list items to the list.
<script>
$(document).ready(function(){
$('#btn').click(function(){
var lastLi = $('#li').val();
$('#list').append("<li>" + lastLi + "</li>");
});
});
</script>
To add static list item we can use following code.
<script>
$(document).ready(function(){
$('#btn').click(function(){
var lastLi = "Last Li";
$('#list').append("<li>" + lastLi + "</li>");
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on How To Add last li using jQuery.