Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create HTML list from JavaScript array?
In this tutorial, we are going to see multiple ways to create an HTML list from a JavaScript array. If we talk about simple HTML list, then we create manually one by one all the lists using ul (unordered list) and inside that li (list) tag.
Consider a case when you will have n number of items and you have to print that in a list then it will be a really hectic task to write all the items and print manually right? Then using the JavaScript iteration method this can be easily done.
Let’s see various ways in JavaScript to create an HTML list.
Using the for loop
Using the for loop with fragment
Using forEach() loop
Using the for Loop
The idea is to iterate through all the items present in the array list using simple for loop which is a vanilla JavaScript default iteration method, and then append the list items by creating li (list) using the createElemnt method into ul (unordered list) item using appendChild.
Example
<html>
<body>
<h3> HTML list using JavaScript using for loop</h3>
<ul id="UnList"></ul>
<script>
let data = ["item1", "item2", "item3", "item4"];
let list = document.getElementById("UnList");
for (i = 0; i < data.length; ++i) {
var li = document.createElement('li');
li.innerText = data[i];
list.appendChild(li);
}
</script>
</body>
</html>Using the for loop with fragment
This is same as first method discussed above but the difference is here, we will use the Fragment to insert. Fragment has tendency to make this separate means it does not attach to the DOM tree so as it doesn’t attach to real DOM then browser has to do less work. In the upper method in which without fragment the browser is doing a lot of work behind the screen which impact the actual performance moreover it doesn’t actually render in the actual page. So, it’s always preferable to use fragment.
To use fragment we will append the list item to the fragment first then we will append fragment to the list instead of inserting directly to the list item without fragment.
Example
<!DOCTYPE html>
<html>
<body>
<h3>HTML list using JavaScript with fragment</h3>
<ul id="UnList"></ul>
<script>
let data = ["item1", "item2", "item3", "item4"];
let list = document.getElementById("UnList");
var fragList = document.createDocumentFragment();
for (i = 0; i < data.length; ++i) {
var li = document.createElement('li');
li.textContent = data[i];
fragList.appendChild(li);
}
list.appendChild(fragList);
</script>
</body>
</html>Using the forEach() Method
The forEach() is an array method in JavaScript that calls the given function once for each element of the item basically it executes a custom callback function for each item that is present in the array list and it does the same work as for loop.
Example
<!DOCTYPE html>
<html>
<body>
<h3>HTML list using JavaScript forEach()</h3>
<ul id="UnList"></ul>
<script>
let data = ["item1", "item2", "item3", "item4"];
let list = document.getElementById("UnList");
var fragList = document.createDocumentFragment();
data.forEach(function (item) {
var li = document.createElement('li');
li.textContent = item;
fragList.appendChild(li);
});
list.appendChild(fragList);
</script>
</body>
</html>So, we saw all the approaches of creating html list using JavaScript directly, Hope you liked it.
8K+ Views
To Continue Learning Please Login