In this tutorial we will learn how to Add first li tag with jQuery. To add first list item we can use jQuery prepend() method which prepends the HTML content to the selected HTML element or tag.
Table of Contents
jQuery prepend() method
jQuery prepend() method inserts the HTML content or HTML tag as a first element to the selected HTML tag.
In this example prepend() method will add the first li tag to our list.
HTML Code
HTML Code is given below, in this code we have a ul tag, input tag and a button tag.
Input tag is used to take input from user which will be added to the list as first list item.
<!DOCTYPE html>
<html>
<head>
<title>Add first li tag with jQuery</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="firstLi" placeholder="Add First Li">
<br><br>
<button id="btn">Add First 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.
Inside this function prepend() method is used to add first li tag.
$('#btn') is an id selector used to select the button tag.
val() method is used to take the list item as input from user and it is stored inside variable before it's prepended to the list.
$('#list') refers to the list element.
<script>
$(document).ready(function() {
$('#btn').click(function(){
var firstLi = $('#firstLi').val();
$('#list').prepend( "<li>" + firstLi + "</li>" );
});
});
</script>
Demo
Video Tutorial
Watch video tutorial on How To add first list item using jQuery.