Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a list elements within an unordered list element using jQuery?
A well-known JavaScript library called jQuery makes interacting with HTML documents and carrying out different operations on web sites making it more effective. Let’s dive into the article to add list elements to an unordered list.
Unordered lists are frequently employed to provide a group of items in a bulleted order. Using jQuery, you may quickly add new list items to an unordered list for any purpose, such as a navigation menu or to-do list. This can be done by using the jQuery append() method.
jQuery append() method
jQuery's append() method enables you to add stuff, such HTML elements or text, to the end of the specified element. It is particularly helpful because there are many situations where you need to add information instantly, like in response to a specific user action.
Syntax
Following is the syntax for jQuery append() method
$(selector).append(content,function(index,html))
Example
Let’s look at the following example, where we are going to add the list element at the end using the append() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body style="background-color:#D6EAF8 ; color:#DE3163">
<ul id="tp">
<li>W</li>
<li>E</li>
<li>L</li>
<li>C</li>
<li>O</li>
<LI>M</LI>
</ul>
<button type="button">Click to add</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#tp").append(' < li > E < /li>');
});
});
</script>
</body>
</html>
When we execute the above script, it will generate an output consisting of a list of items in bullet format along with a click button displayed on the webpage. When the user clicks the button, the event gets triggered, and the element is added at the end of the list.
Example
Consider another example where we are going to add the element in the list at the start of it using the .prepend() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
body {
background-color: #D5F5E3;
color: #DE3163;
font-family: verdana;
}
</style>
</head>
<body>
<ul id="tp">
<li>VIRAT</li>
<li>YUVRAJ</li>
<li>ROHITH</li>
<li>SEHWAG</li>
</ul>
<button type="button">Click to add</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#tp").prepend(' < li > MSD < /li>');
});
});
</script>
</body>
</html>
On executing the above code, the output window will pop up, displaying the list items along with a click button on the webpage. When the user clicks the button, the event gets triggered and displays the element at the start of the list.
Example
Looking into the following example, where we are going to make the user enter the text and later convert it to list items.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
var mylist = $('#input').val();
$('#list').append(' < li > '+mylist+' < /li>');
return false;
});
});
</script>
</head>
<body>
<form> Value: <input type="text" name="task" id="input">
<button>Submit</button>
<br>
<p>Enter text and press submit to convert to list items.</p>
<ul id="list"></ul>
</form>
</body>
</html>
When we execute the above script, it will generate an output consisting of the input field along with a click button on the webpage. When the user enters the text and clicks the button, the event gets triggered and they are added as list items.
13 Views
