jQuery Selectors: Appending a li to an ul element

This entry is part 6 of 33 in the series jQuery Selectors

Using jQuery selector, we can append a <li> item to a <ul> list.

We can use the same selector ul.rock to append an item to the second list.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('ul.rock').append('<li>Tracy Chapman</li>');
        });
    </script>
</head>
<body>

<h4>British Pop</h4>
<ul>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
</ul>

<h4>American Rock</h4>
<ul class='rock'>
    <li>Linkin Park</li>
    <li>Nirvana</li>
    <li>Metalica</li>
</ul>

</body>
</html>
Series Navigation<< jQuery Selectors: Select elements of a specific class
jQuery Selector: Select elements where attribute attr=value >>