How to generate an HTML ul/li
list based on the contents of a JavaScript array, or how to create a JavaScript list.
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.
Table of Contents
- Solution 1: JavaScript
- Solution 1: React
- Solution 2: JavaScript
- Solution 2: React
- Solution 3: JavaScript
- Solution 3: React
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
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';
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
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.
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')
);

Technical SEO specialist, JavaScript developer and senior full-stack developer. Owner of getButterfly.com.
If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!