数据结构
网络
关系数据库管理系统
操作系统
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+ 次浏览
