JavaScript - Convert a Number into JS Array

How to create HTML List from JavaScript Array?

Last Updated : 13 Sep, 2024

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 the for loop
Using forEach() loop
Using join() Method

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:

JavaScript - Convert a Number into JS Array

devi_johns

Improve

Article Tags :

Similar Reads

JavaScript - Find Index of a Value in Array

Here are some effective methods to find the array index with a value in JavaScript. Using indexOf() - Most Used indexOf() returns the first index of a specified value in an array, or -1 if the value is not found. [GFGTABS] JavaScript const a = [10, 20, 30, 40, 50]; // Find index of value 30 const in

JavaScript - How to Get First N Elements from an Array?

There are different ways to get the first N elements from array in JavaScript. Examples: Input:arr = [1, 2, 3, 4, 5, 6], n = 3 Output: [1, 2, 3] Input:arr = [6, 1, 4, 9, 3, 5, 7], n = 4Output: [6, 1, 4, 9]1. Using slice() MethodThe slice() method is used to extract a part of an array and returns a n

How to Copy Array by Value in JavaScript ?

There are various methods to copy array by value in JavaScript. 1. Using Spread OperatorThe JavaScript spread operator is a concise and easy metho to copy an array by value. The spread operator allows you to expand an array into individual elements, which can then be used to create a new array. Synt

What is the most efficient way to concatenate N arrays in JavaScript ?

In this article, we will see how to concatenate N arrays in JavaScript. The efficient way to concatenate N arrays can depend on the number of arrays and the size of arrays. To concatenate N arrays, we use the following methods: Table of Content Method 1: Using push() MethodMethod 2: Using concat() M

How to Merge Two Arrays and Remove Duplicate Items in JavaScript?

Given two arrays, the task is to merge both arrays and remove duplicate items from merged array in JavaScript. The basic method to merge two arrays without duplicate items is using spread operator and the set constructor. 1. Using Spread Operator and Set() ConstructorThe Spread Operator is used to m

How to clone an array in JavaScript ?

In JavaScript, cloning an array means creating a new array with the same elements as the original array without modifying the original array. Here are some common use cases for cloning an array: Table of Content Using the Array.slice() MethodUsing the spread OperatorUsing the Array.from() MethodUsin

JavaScript - Check if JS Array Includes a Value?

To check if an array includes a value we can use JavaScript Array.includes() method. This method returns a boolean value, if the element exists it returns true else it returns false. 1. Using Array.includes() Method - Mostly Used The JS array.includes() method returns true if the array contains the

JavaScript - Create an Object From Two Arrays

Here are the different methods to create an object from two arrays in JavaScript 1. Using for-each loopThe arr.forEach() method calls the provided function once for each element of the array. [GFGTABS] JavaScript //Driver Code Starts{ const a1 = ['name', 'age', 'city']; const

How to remove falsy values from an array in JavaScript ?

Falsy/Falsey Values: In JavaScript, there are 7 falsy values, which are given below falsezero(0,-0)empty string("", ' ' , ` `)BigIntZero(0n,0x0n)nullundefinedNaNIn JavaScript, the array accepts all types of falsy values. Let's see some approaches on how we can remove falsy values from an array in Ja

JavaScript - Use Arrays to Swap Variables

Here are the different methods to swap variables using arrays in JavaScript 1. Using Array DestructuringArray destructuring is the most efficient and modern way to swap variables in JavaScript. This method eliminates the need for a temporary variable. [GFGTABS] JavaScript let x = 5; let y = 10; [x,