Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create HTML list from JavaScript array?
In this tutorial, we will explore multiple ways to create an HTML list from a JavaScript array. While you can manually create HTML lists using ul (unordered list) and li (list item) tags, this becomes impractical when dealing with dynamic data or large arrays.
JavaScript provides efficient methods to dynamically generate HTML lists from array data. Let's examine three different approaches to accomplish this task.
Method 1: Using the for Loop
The simplest approach uses a traditional for loop to iterate through the array and create list items dynamically using createElement() and appendChild().
<html>
<body>
<h3>HTML list using JavaScript with for loop</h3>
<ul id="UnList"></ul>
<script>
let data = ["Apple", "Banana", "Orange", "Mango"];
let list = document.getElementById("UnList");
for (let i = 0; i < data.length; i++) {
var li = document.createElement('li');
li.innerText = data[i];
list.appendChild(li);
}
</script>
</body>
</html>
Method 2: Using for Loop with DocumentFragment
This method improves performance by using DocumentFragment. The fragment acts as a lightweight container that doesn't attach to the DOM tree until we're ready, reducing browser reflow operations and improving performance for larger lists.
<html>
<body>
<h3>HTML list using JavaScript with DocumentFragment</h3>
<ul id="UnList"></ul>
<script>
let data = ["Apple", "Banana", "Orange", "Mango"];
let list = document.getElementById("UnList");
let fragment = document.createDocumentFragment();
for (let i = 0; i < data.length; i++) {
var li = document.createElement('li');
li.textContent = data[i];
fragment.appendChild(li);
}
list.appendChild(fragment);
</script>
</body>
</html>
Method 3: Using forEach() Method
The forEach() method provides a more functional programming approach. It executes a callback function for each array element, making the code more readable and concise.
<html>
<body>
<h3>HTML list using JavaScript forEach()</h3>
<ul id="UnList"></ul>
<script>
let data = ["Apple", "Banana", "Orange", "Mango"];
let list = document.getElementById("UnList");
let fragment = document.createDocumentFragment();
data.forEach(function(item) {
var li = document.createElement('li');
li.textContent = item;
fragment.appendChild(li);
});
list.appendChild(fragment);
</script>
</body>
</html>
Method 4: Using map() and innerHTML
For a more modern approach, you can use map() to transform the array into HTML strings and set the innerHTML directly.
<html>
<body>
<h3>HTML list using map() and innerHTML</h3>
<ul id="UnList"></ul>
<script>
let data = ["Apple", "Banana", "Orange", "Mango"];
let list = document.getElementById("UnList");
list.innerHTML = data.map(item => `<li>${item}</li>`).join('');
</script>
</body>
</html>
Performance Comparison
| Method | Performance | Readability | Best For |
|---|---|---|---|
| for Loop | Good | Good | Simple lists |
| for Loop + Fragment | Best | Good | Large lists |
| forEach() | Good | Excellent | Functional style |
| map() + innerHTML | Good | Excellent | Modern JavaScript |
Conclusion
All methods effectively create HTML lists from JavaScript arrays. Use DocumentFragment for better performance with large datasets, forEach() for cleaner code, or map() with innerHTML for a modern functional approach.
10K+ Views
