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.
Table of Contents
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')
);Solution 4: The modern one-liner (map + join)
If you just need the markup as a string and don’t care about building nodes one by one, the most concise modern approach maps the array to <li> strings and joins them. Assign the result to a container’s innerHTML and you’re done:
const fruits = ['Apple', 'Banana', 'Cherry'];
document.getElementById('list').innerHTML =
'<ul>' + fruits.map(item => `<li>${item}</li>`).join('') + '</ul>';This is great for readability, but remember that innerHTML does not escape values. If your array contains user-supplied data, sanitise it first or build the nodes with createElement and textContent (as in the earlier solutions) to avoid cross-site scripting (XSS).
Which solution should you use?
All of the approaches above produce the same HTML list – the right one depends on your context. Reach for createElement when you need safe handling of untrusted data or want references to each node. Use the compact forEach or map().join('') versions for quick, read-only rendering of trusted data. And if you already work in React, let the framework handle the DOM by returning <li> elements from a mapped array with a stable key prop.
Frequently Asked Questions
How do I create an ordered list instead of an unordered list?
Swap the ul element for an ol element. Every example here uses document.createElement('ul') or a <ul> wrapper – change it to ol and the browser numbers the items automatically.
Is innerHTML or createElement better for building a list?
For trusted, static data, innerHTML with map().join('') is concise and fast. For data that comes from users or an API, createElement together with textContent is safer because it never interprets the values as HTML.
How do I render a list from an array of objects?
Read the property you want inside the loop or map callback, for example items.map(item => `<li>${item.name}</li>`). The same pattern applies to the vanilla and React solutions above.
