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 render a list without rendering an engine in JavaScript?
In this tutorial, we'll be discussing how to render a list without rendering an engine in JavaScript. We'll go over the different methods and techniques that can be used to achieve this.
Method 1: Using the Array.forEach() Method
One way to render a list without rendering an engine in JavaScript is to use the Array.forEach() method. This method can be used to iterate over an array and execute a callback function for each element in the array.
The callback function can be used to render the list. For example, we can use the callback function to create a list item for each element in the array.
Example
Below is the full working JavaScript code with HTML
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <p>Rendering the list using the Array.forEach() Method</p> <div id="result"></div> <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>
In the above code, we've created an array of numbers. We've then used the Array.forEach() method to iterate over the array. For each element in the array, we've created a list item and added it to the DOM.
Method 2: Using the for loop
Another way to render a list without rendering an engine in JavaScript is to use a for loop. This method can be used to iterate over an array and execute a callback function for each element in the array.
The for loop will help to iterate the array in a more traditional way.
Example
Below is the full working JavaScript code with HTML −
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <p>Rendering the list using the for loop</p> <div id="result"></div> <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>
In the above code, we've created an array of numbers. We've then used a for loop to iterate over the array. For each element in the array, we've created a list item and added it to the DOM.
Method 3: Using the Array.map() Method
Another way to render a list without rendering an engine in JavaScript is to use the Array.map() method. Using the Array.map() method, we can create a new array from an existing array.
For each element in the existing array, the Array.map() method will execute a callback function. The callback function can be used to render the list.
Example
Below is the full working JavaScript code with HTML −
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <p>Rendering the list using the Array.map() Method</p> <div id="result"></div> <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>
In the above code, we've created an array of numbers. We've then used the Array.map() method to create a new array. For each element in the array, we've created a list item and added it to the DOM.
Method 4: Using the for…of loop
Another way to render a list without rendering an engine in JavaScript is to use the for…of loop. The “for…of” loop can be used to iterate over an array and execute a callback function for each element in the array.
The callback function can be used to render the list. For example, we can use the callback function to create a list item for each element in the array.
Example
Below is the full working JavaScript code with HTML −
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <p>Rendering the list Using the for…of loop</p> <div id="result"></div> <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>
In the above code, we've created an array of numbers. We've then used the for…of loop to iterate over the array. For each element in the array, we've created a list item and added it to the DOM.
Method 5: Using the jQuery each() Method
Another way to render a list without rendering an engine in JavaScript is to use the jQuery each() method. This method can be used to iterate over an array and execute a callback function for each element in the array.
The callback function can be used to render the list. For example, we can use the callback function to create a list item for each element in the array.
Example
Below is the full working JavaScript code with HTML −
<!doctype html> <html> <head> <title>Examples</title> </head> <body> <p>Rendering the list Using the jQuery each() Method</p> <div id="result"></div> <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>
In the above code, we've created an array of numbers. We've then used the jQuery each() method to iterate over the array. For each element in the array, we've created a list item and added it to the DOM.
In this tutorial, we've discussed how to render a list without render a engine in JavaScript. We've covered the different methods and techniques that can be used to achieve this.
1K+ Views
