如何从 JavaScript 数组创建 HTML 列表?
在本教程中，我们将了解从 JavaScript 数组创建 HTML 列表的多种方法。如果我们谈论简单的 HTML 列表，那么我们使用 ul(无序列表)和 li(列表)标签手动逐个创建所有列表。
考虑这样一种情况，当您有 n 个项目并且您必须将其打印在列表中时，编写所有项目并手动打印将是一项非常繁重的任务，对吗?然后使用 JavaScript 迭代方法可以轻松完成此操作。
让我们看看在 JavaScript 中创建 HTML 列表的各种方法。
使用 for 循环
使用带有 fragment 的 for 循环
使用 forEach() 循环
使用 for 循环
这个想法是使用简单的 for 循环(一种原始的 JavaScript 默认迭代方法)遍历数组列表中存在的所有项目，然后通过使用 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>
使用带有 fragment 的 for 循环
这与上面讨论的第一种方法相同，但不同之处在于，我们将使用 Fragment 进行插入。Fragment 倾向于将其分离，这意味着它不会附加到 DOM 树，因此它不会附加到实际 DOM，浏览器需要做的工作较少。在上面的方法中，如果没有 fragment，浏览器会在屏幕后面做大量工作，这会影响实际性能，而且它实际上不会在实际页面中呈现。所以，最好使用 fragment。
要使用 fragment，我们将首先将列表项附加到 fragment，然后将 fragment 附加到列表中，而不是直接插入到没有 fragment 的列表项中。
示例
<!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 列表的所有方法，希望您喜欢它。
