如何從 JavaScript 陣列建立 HTML 清單？
- WBOY轉載
- 2023-08-24 22:29:021106瀏覽
在本教學中，我們將看到從 JavaScript 陣列建立 HTML 清單的多種方法。如果我們談論簡單的HTML 列表，那麼我們使用ul（無序列表）手動建立所有列表，並在該##li em> （列表）標籤。
考慮這樣一種情況，您將有 n 個項目，並且必須將其列印在清單中，那麼編寫所有項目將是一項非常繁忙的任務。項目並手動列印對嗎？然後使用 JavaScript 迭代方法就可以輕鬆完成此操作。 讓我們看看 JavaScript 中建立 HTML 清單的各種方法。- 使用
for 迴圈
- #將
for 迴圈與片段結合使用
- 使用forEach() 迴圈
createElemnt 方法建立li（列表）來將列表項附加到使用 的ul（無序列表）項中appendChild。
範例<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迴圈這與上面討論的第一種方法相同，但不同之處在於，我們將使用Fragment 來插入。 Fragment 傾向於將其分開，這意味著它不會附加到 DOM 樹，因此它不會附加到真實的 DOM，那麼瀏覽器必須做更少的工作。在上面的方法中，沒有片段，瀏覽器在螢幕後面做了很多工作，這會影響實際效能，而且它實際上不會在實際頁面中呈現。因此，最好使用片段。
要使用片段，我們將首先將列表項目附加到片段，然後將片段附加到列表，而不是直接插入到沒有片段的列表項目。 p>範例
<!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 清單的所有方法，希望你喜歡它。 以上是如何從 JavaScript 陣列建立 HTML 清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除