資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何用 JavaScript 陣列建立 HTML 列表？
在本教程中，我們將學習多種方法，使用 JavaScript 陣列建立 HTML 列表。如果我們談論簡單的 HTML 列表，那麼我們會使用 **ul**（無序列表）手動逐個建立所有列表，並在其中使用 **li**（列表項）標籤。
考慮這樣一種情況：您有 n 個專案，必須將它們列印到列表中，那麼手動編寫所有專案並列印將是一項非常繁瑣的任務，對吧？然後使用 JavaScript 迭代方法可以輕鬆完成。
讓我們看看在 JavaScript 中建立 HTML 列表的各種方法。
使用 for 迴圈
使用帶片段的 for 迴圈
使用 forEach() 迴圈
使用 for 迴圈
其思想是使用簡單的 for 迴圈（這是 JavaScript 的預設迭代方法）遍歷陣列列表中存在的所有專案，然後透過使用 createElemnt 方法建立 li（列表項），並使用 appendChild 將其附加到 ul（無序列表）項中，來追加列表項。
示例
<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>使用帶片段的 for 迴圈
這與上面討論的第一種方法相同，但不同之處在於，我們將使用 **片段** 進行插入。片段傾向於使這部分分離，這意味著它不附加到 DOM 樹，因此因為它不附加到實際 DOM，瀏覽器需要做的工作就更少。在沒有片段的上面方法中，瀏覽器在螢幕背後做了大量工作，這會影響實際效能，此外它實際上並沒有在實際頁面中呈現。因此，最好使用片段。
要使用片段，我們將首先將列表項附加到片段，然後我們將片段附加到列表，而不是直接在沒有片段的情況下插入到列表項。
示例
<!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>使用 forEach() 方法
forEach() 是 JavaScript 中的一種陣列方法，它為專案的每個元素呼叫給定的函式，基本上它為陣列列表中存在的每個專案執行自定義回撥函式，並且它與 for 迴圈的作用相同。
示例
<!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>因此，我們看到了使用 JavaScript 直接建立 html 列表的所有方法，希望您喜歡它。
9K+ 次瀏覽
