How to create HTML List from JavaScript Array?

Last Updated : 13 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Creating an HTML list from a JavaScript array allows you to dynamically generate <ul> (unordered) or <ol> (ordered) lists and fill them with data directly from your array. This is useful when you want to display array data in a structured way on your webpage. In this guide, we’ll go through several approaches to create lists from JavaScript arrays, including using for loops, forEach(), and the join() method.

Table of Content

Using for loop

The for loop is a simple way to iterate through an array and create list items for each element. By appending each element as a <li> item to the <ul> or <ol>, you can easily generate your list.

Example: This HTML creates a webpage that displays a centered "GeeksforGeeks" title and a list of names ("Ram", "Shyam", "Sita", "Gita") dynamically added using JavaScript.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Create a HTML list using JavaScript</title>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
    </center>
    <ul id="myList"></ul>
    <script>
        let data = ["Ram", "Shyam", "Sita", "Gita"];
        let list = document.getElementById("myList");
        for (i = 0; i < data.length; ++i) {
            let li = document.createElement('li');
            li.innerText = data[i];
            list.appendChild(li);
        }
    </script>
</body>

</html>

Output:

Using forEach() loop

The forEach() method is another way to iterate over an array and perform an action on each element. It’s a cleaner and more readable approach compared to the traditional for loop.

Syntax:

array.forEach(callback(element, index, arr), thisValue)

Example: This HTML creates a webpage that displays a centered "GeeksforGeeks" title and a list of names ("Ram", "Shyam", "Sita", "Gita") dynamically added using JavaScript.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Create a HTML list using JavaScript</title>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
    </center>
    <ul id="myList"></ul>

    <script>
        let data = ["Ram", "Shyam",
            "Sita", "Gita"];
        let list =
            document.getElementById("myList");

        data.forEach((item) => {
            let li =
                document.createElement("li");
            li.innerText = item;
            list.appendChild(li);
        });
    </script>
</body>

</html>

Output:

Using join() Method

The Array join() Method in JavaScript is typically used to combine elements of an array into a single string, separated by a specified separator. While it’s not used directly for creating lists, you can use it creatively with innerHTML to generate list items.

Syntax:

array.join(separator)

Example: This HTML creates a webpage that displays a centered "GeeksforGeeks" title and a list of names ("Ram", "Shyam", "Sita", "Gita") dynamically added using JavaScript.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Create a HTML list using JavaScript</title>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
    </center>
    <ul id="myList"></ul>

    <script>
        // JavaScript array
        let data = ["Ram", "Shyam",
            "Sita", "Gita"];

        // Get the list container element
        let list =
            document.getElementById('myList');

        // Create the unordered list element 
        //and set its inner HTML using map() and join()
        let ul = `<ul>${data.map(data =>
            `<li>${data}</li>`).join('')}
                  </ul>`;

        // Set the inner HTML of the list container
        list.innerHTML = ul;
    </script>
</body>

</html>

Output:


Next Article
How to create HTML List from JavaScript Array?
author
devi_johns
Improve
Article Tags :

Similar Reads