How to Dynamically Create HTML Lists (<ul> and <li>) with jQuery Using XML Data

Last Updated: 19th May 2025

HTML lists are a fundamental part of structuring web content. The <li> (list item) element is commonly used within <ol> (ordered list) or <ul> (unordered list) tags to organize items effectively. While lists are often created manually during design, they can also be generated dynamically. In this tutorial, I'll show you how to use jQuery to dynamically create an unordered list (<ul>) with list items (<li>) based on data extracted from an XML document. Finally, we'll style and build a visually appealing dropdown menu using dynamically generated <ul>, <li>, and <a> elements.

Dynamically Created UL Li with jQuery

See this demo

First, we need to create an XML document with a list of data in it. The XML I am using for this example has a list of books. Save the file with a name "the-store.xml".

The XML

 <?xml version="1.0"?>
 <!--   Last edited by https://www.encodedna.com   -->
 <catalog>
  <book>
    <title>Computer Architecture</title>
  </book>
  <book>
    <title>Advanced Composite Materials</title>
  </book>
  <book>
    <title>Asp.Net 4 Blue Book</title>
  </book>
  <book>
    <title>Strategies Unplugged</title>
  </book>
  <book>
    <title>Teaching Science</title>
  </book>
  <book>
    <title>Challenging Times</title>
  </book>
  <book>
    <title>Circuit Bending</title>
  </book>
  <book>
    <title>Popular Science</title>
  </book>
  <book>
    <title>ADOBE Premiere</title>
  </book>
</catalog>

Point of Interest

HTML list items (<li>) play a crucial role in building navigation menus and dropdown menus, making web interfaces more user-friendly. One of the best applications of dynamically created <ul> and <li> elements is in crafting a responsive dropdown menu for seamless navigation. In this example, the <book> tag from the XML document serves as the main menu, while the <title> tag provides data for submenu items in the dropdown list. By leveraging dynamic list generation, you can enhance usability and improve the visual appeal of your website.

The Markup, CSS and the Script

In the markup section, I have included an unordered list (<ul>) that serves as the main container for the dynamically generated <li> and <ul> elements in the jQuery section. The CSS styling enhances functionality by creating the dropdown effect for the list items, ensuring a visually appealing and responsive navigation menu.

🚀 Learn how to make HTTP requests using async and await.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <style>
        ul {
            list-style:none;
            padding:0px;
            margin:0px;
        }
        ul li {
            display:block;
            position:relative;
            float:left;
            border:none;
        }
        li ul {
            display:none;
        }
        ul li a {
            display:block;
            transition:all linear 0.2s;
            background:#000;
            padding:5px 10px;
            text-decoration:none;
            white-space:nowrap;
            color:#FFF;
            background:#909EAB;
        }
        ul li a:hover {
            background:#4B545F;
        }
        li:hover ul {
            display:block;
            position:absolute;
        }
        li:hover li {
            float:none;
        }
        li:hover a {
            background:#5F6975;
        }
        li:hover li a:hover {
            background:#4B545F;
        }
    </style>
</head>

<body>
    <ul id="menu"></ul>
</body>

<script>
    $(document).ready(function () {

        // THE TOP (HEADER) LIST ITEM.
        var li = $('<li/>')
            .appendTo('#menu');

        $('<a />')
            .text('Book')
            .attr('href', '#')
            .appendTo(li);     // ADD THE TOP LIST TO THE HEADER (<ul>).

        // CREATE THE SUB <ul>.
        var sub_ul = $('<ul/>')
            .appendTo(li);

        // EXTRACT XML DATA.
        $.ajax({
            type: 'GET',
            url: 'https://www.encodedna.com/library/library.xml', 
            dataType: 'xml',
            success: function (xml) {
                $(xml).find('List').each(function () {
                    // CREATE AND ADD SUB LIST ITEMS.
                    var sub_li = $('<li/>')
                        .appendTo(sub_ul);

                    title = $(this).find('BookName').text();

                    $('<a />')
                        .text(title)
                        .attr('href', 'https://www.encodedna.com')
                        .appendTo(sub_li);
                });
            }
        });
    });
</script>
</html>

Try it

Conclusion

If the article feels lengthy, you can focus on the Point of Interest section for key insights. The core idea is straight-forward demonstrating how to dynamically generate HTML list items (<li>) using jQuery. To enhance practical application, I have included additional details explaining how you can integrate this method into your projects. Additionally, you can explore alternative approaches to extracting list items, such as using arrays or JSON data structures.

See this demo

← PreviousNext →