极客教程JavaScript 如何从数组创建HTML列表
在本文中，我们将创建一个 HTML列表 ，这需要在从任何来源检索JSON并在前端显示数据等情况下使用。
以下是从JavaScript数组创建列表的方法：
- 使用for循环
- 使用forEach()循环
- 使用join()方法
方法1：使用for循环
我们可以使用简单的 for 循环迭代列表，然后使用appendChild添加列表项。
示例：
<!DOCTYPE html>
<html lang="en">
<body>
<center>
<h1>GeeksforGeeks</h1>
</center>
<ul id="myList"></ul>
<script>
let data = ["Ram", "Shyam", "Sita", "Gita"];
let list = document.getElementById("myList");
for (i = 0; i < data.length; ++i) {
let li = document.createElement('li');
li.innerText = data[i];
list.appendChild(li);
}
</script>
</body>
</html>
输出：
方法2：使用forEach()循环
arr.forEach() 方法对数组的每个元素调用提供的函数一次。提供的函数可以对给定数组的元素进行任何类型的操作。
语法：
array.forEach(callback(element, index, arr), thisValue)
示例：
<!DOCTYPE html>
<html lang="en">
<body>
<center>
<h1>GeeksforGeeks</h1>
</center>
<ul id="myList"></ul>
<script>
let data = ["Ram", "Shyam",
"Sita", "Gita"];
let list =
document.getElementById("myList");
data.forEach((item) => {
let li =
document.createElement("li");
li.innerText = item;
list.appendChild(li);
});
</script>
</body>
</html>
输出：
方法3：使用join()方法
JavaScript 数组join() 方法用于将数组的元素连接成一个字符串。字符串的元素将由指定的分隔符分隔，其默认值为逗号(, )。
语法：
array.join(separator)
示例：
<!DOCTYPE html>
<html lang="en">
<body>
<center>
<h1>GeeksforGeeks</h1>
</center>
<ul id="myList"></ul>
<script>
// JavaScript array
let data = ["Ram", "Shyam",
"Sita", "Gita"];
// Get the list container element
let list =
document.getElementById('myList');
// Create the unordered list element
//and set its inner HTML using map() and join()
let ul = `<ul>{data.map(data =>
`<li>{data}</li>`).join('')}
</ul>`;
// Set the inner HTML of the list container
list.innerHTML = ul;
</script>
</body>
</html>
输出：
