資料結構
網路
關係型資料庫管理系統
作業系統
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.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>
在上面的程式碼中，我們建立了一個數字陣列。然後，我們使用 jQuery each() 方法迭代陣列。對於陣列中的每個元素，我們都建立了一個列表項並將其新增到 DOM。
在本教程中，我們討論瞭如何在 JavaScript 中渲染列表而不渲染引擎。我們介紹了可用於實現此目的的不同方法和技術。
1K+ 次瀏覽
