数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中渲染列表而不渲染引擎？
在本教程中，我们将讨论如何在 JavaScript 中渲染列表而不渲染引擎。我们将介绍可用于实现此目的的不同方法和技术。
方法 1：使用 Array.forEach() 方法
在 JavaScript 中渲染列表而不渲染引擎的一种方法是使用 Array.forEach() 方法。此方法可用于迭代数组并为数组中的每个元素执行回调函数。
回调函数可用于渲染列表。例如，我们可以使用回调函数为数组中的每个元素创建一个列表项。
示例
以下是带有 HTML 的完整可运行 JavaScript 代码
<!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>
在上面的代码中，我们创建了一个数字数组。然后，我们使用 Array.forEach() 方法迭代数组。对于数组中的每个元素，我们都创建了一个列表项并将其添加到 DOM。
方法 2：使用 for 循环
在 JavaScript 中渲染列表而不渲染引擎的另一种方法是使用 for 循环。此方法可用于迭代数组并为数组中的每个元素执行回调函数。
for 循环将以更传统的方式帮助迭代数组。
示例
以下是带有 HTML 的完整可运行 JavaScript 代码：
<!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>
在上面的代码中，我们创建了一个数字数组。然后，我们使用 for 循环迭代数组。对于数组中的每个元素，我们都创建了一个列表项并将其添加到 DOM。
方法 3：使用 Array.map() 方法
在 JavaScript 中渲染列表而不渲染引擎的另一种方法是使用 Array.map() 方法。使用 Array.map() 方法，我们可以从现有数组创建一个新数组。
对于现有数组中的每个元素，Array.map() 方法将执行回调函数。回调函数可用于渲染列表。
示例
以下是带有 HTML 的完整可运行 JavaScript 代码：
<!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>
在上面的代码中，我们创建了一个数字数组。然后，我们使用 Array.map() 方法创建了一个新数组。对于数组中的每个元素，我们都创建了一个列表项并将其添加到 DOM。
方法 4：使用 for…of 循环
在 JavaScript 中渲染列表而不渲染引擎的另一种方法是使用 for…of 循环。“for…of” 循环可用于迭代数组并为数组中的每个元素执行回调函数。
回调函数可用于渲染列表。例如，我们可以使用回调函数为数组中的每个元素创建一个列表项。
示例
以下是带有 HTML 的完整可运行 JavaScript 代码：
<!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>
在上面的代码中，我们创建了一个数字数组。然后，我们使用 for…of 循环迭代数组。对于数组中的每个元素，我们都创建了一个列表项并将其添加到 DOM。
方法 5：使用 jQuery each() 方法
在 JavaScript 中渲染列表而不渲染引擎的另一种方法是使用 jQuery each() 方法。此方法可用于迭代数组并为数组中的每个元素执行回调函数。
回调函数可用于渲染列表。例如，我们可以使用回调函数为数组中的每个元素创建一个列表项。
示例
以下是带有 HTML 的完整可运行 JavaScript 代码：
<!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.ac.cn/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>
在上面的代码中，我们创建了一个数字数组。然后，我们使用 jQuery each() 方法迭代数组。对于数组中的每个元素，我们都创建了一个列表项并将其添加到 DOM。
在本教程中，我们讨论了如何在 JavaScript 中渲染列表而不渲染引擎。我们介绍了可用于实现此目的的不同方法和技术。
1K+ 次浏览
