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.

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

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

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
    listContainer = document.createElement('div'),

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

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

    // Add it to the page
    document.getElementsByTagName('body')[0].appendChild(listContainer);
    listContainer.appendChild(listElement);

    for (i = 0; i < numberOfListItems; ++i) {
        // Create an item for each one
        listItem = document.createElement('li');

        // Add the item text
        listItem.innerHTML = listData[i];

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

// Usage
makeList();

See a JSFiddle demo here.

Solution 2

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

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement('ul');

document.getElementById('myItemList').appendChild(ul);

items.forEach(item => {
    let li = document.createElement('li');
    ul.appendChild(li);

    li.innerHTML += item;
});

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.
Check out this jsPerf test in a modern browser.

Solution 3

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');

    for (let i = 0; i < array.length; i++) {
        // Create the list item
        let item = document.createElement('li');

        // Set its contents
        item.appendChild(document.createTextNode(array[i]));

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

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

// Add the contents of options[0] to #foo:
document.getElementById('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.

Ciprian Popescu

Technical SEO Specialist, JavaScript Programmer and Senior Full Stack Developer. On a quest to experiment with Canvas, WebGL, JavaScript, SEO and WordPress, among many other things. Owner of getButterfly.com, founder of WPDublin and SpeedFactor, co-organizer of Dublin WordPress Meetup group.

If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!