Q:

How to Add li in an Existing ul using jQuery

mhmadesk
Save to bookmark
|
2022-05-18
|
  729 
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)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now