getButterfly Logo

Generate HTML List From JavaScript Array

Generate an HTML list based on the contents of a JavaScript array. By modifying the makeList() function to accept parameters and target elements, you can pass different arrays and generate different lists inside different containers.

function makeList() {
    // Establish the array which acts as a data source for the list
    var listData = [

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

    // Add it to the page

    // Make the list
    var listElement = document.createElement("ul");

    // Add it to the page

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

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

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

        // Add listItem to the listElement

// Usage

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Leave a Reply

Subscribe to our mailing list