Generate HTML List From JavaScript Array

How to generate an HTML ul/li list based on the contents of a JavaScript array, or how to create a JavaScript list.

How to make a list in JavaScript (JS)

Learn how to create a dynamic HTML list based on the contents of a JavaScript array. This tutorial shows you how to generate an unordered HTML list (ul) with list items (li) using vanilla JavaScript or React, making it easy to display data from an array in a clear and organized way. In this tutorial, you will find three solutions for vanilla JavaScript and three solutions for React, giving you a range of options to choose from, depending on your needs and preferences.

How to make a list in JavaScript (JS)

By modifying the makeList() function to accept parameters and target elements, you can pass different arrays and generate different lists inside different containers.

Solution 1: JavaScript

This vanilla JavaScript function has zero dependencies and works in all browsers:

/**
 * Generate HTML List From JavaScript Array
 *
 * @source https://getbutterfly.com/generate-html-list-from-javascript-array/
 */
function makeList() {
    // Establish the array which acts as a data source for the list
    let listData = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ];

    // Make a container element for the list
    let listContainer = document.createElement('div');

    // Make the list
    let listElement = document.createElement('ul');

    // Make the list item
    let listItem = document.createElement('li');

    // Add it to the page
    document.body.appendChild(listContainer);
    listContainer.appendChild(listElement);

    // Set up a loop that goes through the items in listItems one at a time
    let numberOfListItems = listData.length;

    for (let i = 0; i < numberOfListItems; ++i) {
        // Add the item text

	// Use this if the array elements contain HTML
        // listItem.innerHTML = listData[i];
        // If not, use the line below

	// Use this if the array elements are text only
        listItem.textContent = listData[i];

        // Add listItem to the listElement
        listElement.appendChild(listItem);

        // Reset the list item
        listItem = document.createElement('li');
    }
}

// Usage
makeList();

See a JSFiddle demo here.

Solution 1: React

If you are using React, you could build the entire list in JavaScript and then insert it into the DOM in a single operation, which can be faster than adding elements one at a time. See the code below on how to use React to create the list:

/**
 * Generate HTML List From JavaScript Array
 *
 * @source https://getbutterfly.com/generate-html-list-from-javascript-array/
 */
import React from 'react';
import ReactDOM from 'react-dom';

function makeList() {
    const listData = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ];

    const listItems = listData.map((item) => (
        <li key={item}>{item}</li>
    ));

    ReactDOM.render(
        <ul>{listItems}</ul>,
        document.getElementById('root')
    );
}

// Usage
makeList();

Solution 2: JavaScript

This function is more compact and uses a forEach() loop:

/**
 * Generate HTML List From JavaScript Array
 *
 * @source https://getbutterfly.com/generate-html-list-from-javascript-array/
 */
let items = [
    'Blue',
    'Red',
    'White',
    'Green',
    'Black',
    'Orange'
];

// Make the list
let ul = document.createElement('ul');

// Make the list item
let li = document.createElement('li');

document.querySelector('#myItemList').appendChild(ul);

items.forEach((item) => {
    // Add the item text
    li.innerHTML += item;

    // Add li to the ul
    ul.appendChild(li);

    // Reset the list item
    li = document.createElement('li');
});

Solution 2: React

/**
 * Generate HTML List From JavaScript Array
 *
 * @source https://getbutterfly.com/generate-html-list-from-javascript-array/
 */
import React from 'react';
import ReactDOM from 'react-dom';

let items = [
    'Blue',
    'Red',
    'White',
    'Green',
    'Black',
    'Orange'
];

const listItems = items.map((item) => (
    <li key={item}>{item}</li>
));

ReactDOM.render(
    <ul>{listItems}</ul>,
    document.getElementById('myItemList')
);

Here’s another way of doing it, similar to the first solution. Note that the forEach() loop is marginally slower. See it as the third solution below.

Solution 3: JavaScript

/**
 * Generate HTML List From JavaScript Array
 *
 * @source https://getbutterfly.com/generate-html-list-from-javascript-array/
 */
const options = [
    set0 = [
        'Option 1',
        'Option 2'
    ],
    set1 = [
        'First Option',
        'Second Option',
        'Third Option'
    ]
];

function makeUL(array) {
    // Create the list element
    let list = document.createElement('ul');

    // Create the list item
    let item = document.createElement('li');

    for (let i = 0; i < array.length; i++) {
        // Set its contents
        item.appendChild(document.createTextNode(array[i]));

        // Add it to the list
        list.appendChild(item);

        // Reset the list item
        item = document.createElement('li');
    }

    // Finally, return the constructed list
    return list;
}

// Add the contents of options[0] to #foo:
document.querySelector('#foo').appendChild(makeUL(options[0]));

/**
 * Usage
 * Add an element to hold the data:
 * <div id="foo"></div>
 */
makeUL(options.set0);

// or

makeUL(options.set1);

This solution can be extended to pass an element parameter to the makeUL() function and display different arrays in different elements.

Solution 3: React

This code defines a List component that takes an items prop and renders an unordered list with a list item for each item in the items array. The component is then rendered with the contents of options.set0 (or options.set1):

/**
 * Generate HTML List From JavaScript Array
 *
 * @source https://getbutterfly.com/generate-html-list-from-javascript-array/
 */
import React from 'react';
import ReactDOM from 'react-dom';

const options = [
    set0 = ['Option 1','Option 2'],
    set1 = ['First Option','Second Option','Third Option']
];

const List = ({ items }) => {
    return (
        <ul>
            {items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </ul>
    );
};

ReactDOM.render(
    <List items={options.set0} />,
    document.getElementById('foo')
);

/**
 * Usage
 * Add an element to hold the data:
 * <div id="foo"></div>
 */
ReactDOM.render(
    <List items={options.set0} />,
    document.getElementById('root')
);

// or

ReactDOM.render(
    <List items={options.set1} />,
    document.getElementById('root')
);