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 render a list without rendering an engine in JavaScript?
In this tutorial, we'll explore how to render a list dynamically in JavaScript without using a rendering engine like React or Vue. We'll demonstrate various methods to create lists directly in the DOM using vanilla JavaScript and jQuery.
Using Array.forEach() Method
The Array.forEach() method iterates over an array and executes a callback function for each element. This is ideal for creating list items dynamically.
<!doctype html>
<html>
<head>
<title>forEach Example</title>
</head>
<body>
<p>Rendering the list using the Array.forEach() Method</p>
<ul id="result"></ul>
<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.forEach(function(element) {
var node = document.createElement("LI");
var textnode = document.createTextNode(element);
node.appendChild(textnode);
document.getElementById("result").appendChild(node);
});
</script>
</body>
</html>
This example creates an array of numbers and uses forEach() to iterate through each element, creating list items and appending them to a <ul> element.
Using for Loop
The traditional for loop provides more control over the iteration process and is useful when you need access to the index.
<!doctype html>
<html>
<head>
<title>for Loop Example</title>
</head>
<body>
<p>Rendering the list using the for loop</p>
<ul id="result"></ul>
<script>
var arr = ["one","two","three","four","five","six","seven","eight","nine","ten"];
for(var i=0; i < arr.length; i++) {
var node = document.createElement("LI");
var textnode = document.createTextNode(arr[i]);
node.appendChild(textnode);
document.getElementById("result").appendChild(node);
}
</script>
</body>
</html>
This approach uses a traditional for loop to iterate through an array of strings, creating numbered list items for each element.
Using Array.map() Method
The Array.map() method creates a new array by transforming each element. While typically used for data transformation, it can also render DOM elements.
<!doctype html>
<html>
<head>
<title>map() Example</title>
</head>
<body>
<p>Rendering the list using the Array.map() Method</p>
<ul id="result"></ul>
<script>
var arr = ["Tutorials", "Point", "Simply", "Easy", "Learning"];
var newArr = arr.map(function(element) {
var node = document.createElement("LI");
var textnode = document.createTextNode(element);
node.appendChild(textnode);
document.getElementById("result").appendChild(node);
return node;
});
</script>
</body>
</html>
Here, map() creates list items while also returning them in a new array for potential future use.
Using for...of Loop
The for...of loop provides a cleaner syntax for iterating over array elements without needing to manage indices.
<!doctype html>
<html>
<head>
<title>for...of Example</title>
</head>
<body>
<p>Rendering the list using the for...of loop</p>
<ul id="result"></ul>
<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
for(var element of arr) {
var node = document.createElement("LI");
var textnode = document.createTextNode(element);
node.appendChild(textnode);
document.getElementById("result").appendChild(node);
}
</script>
</body>
</html>
The for...of loop simplifies array iteration by directly accessing each element without index management.
Using jQuery each() Method
jQuery's each() method provides a convenient way to iterate over arrays with additional utility functions.
<!doctype html>
<html>
<head>
<title>jQuery each() Example</title>
</head>
<body>
<p>Rendering the list using jQuery each() Method</p>
<ul id="result"></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var arr = [1,2,3,4,5,6,7,8,9,10];
$.each(arr, function(index, element) {
var node = document.createElement("li");
var textnode = document.createTextNode(element);
node.appendChild(textnode);
document.getElementById("result").appendChild(node);
});
</script>
</body>
</html>
This method requires jQuery library but provides both index and element parameters in the callback function.
Comparison of Methods
| Method | Syntax Complexity | Browser Support | Best For |
|---|---|---|---|
| forEach() | Medium | ES5+ | Simple iteration |
| for loop | Medium | All browsers | Index access needed |
| map() | Medium | ES5+ | Transformation + rendering |
| for...of | Low | ES6+ | Clean iteration |
| jQuery each() | Low | All (with jQuery) | jQuery projects |
Conclusion
All these methods effectively render lists without a rendering engine. Choose forEach() for simplicity, for...of for modern clean code, or traditional for loops when index access is needed. jQuery's each() is ideal for projects already using jQuery.
2K+ Views
