Q:

How to Add li in an Existing ul using jQuery

mhmadesk
Save to bookmark
|
2022-05-18
|
  395 
Very Easy
1

How to Add <li> in an Existing <ul> using jQuery

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the jQuery append() Method

You can simply use the jQuery append() method to add <li> elements in an existing <ul> element.

The following example will add a <li> element at the end of an <ul> on click of the button.

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Add LI to an Existing UL</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#menu").append('<li><a href="#">New list item</a></li>');
    });
});
</script>
</head>
<body>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
    </ul>
    <button type="button">Add New LI Element</button>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

JavaScript / jQuery Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to Get the Value in an Input Text Box using jQ... >>
<< How to Replace innerHTML of a Div using jQuery...