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.
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.
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(function (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.
Check out this jsPerf test in a modern browser.
Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.