如何从 JavaScript 数组创建 HTML 列表？

在 web 开发中，我们经常需要从 JavaScript 数组中创建 HTML 列表来展示数据。这个过程非常简单，下面我们将介绍一些实现方法。

使用 for 循环

我们可以使用 for 循环遍历数组，并使用 document.createElement() 方法创建列表元素并将其添加到列表中，最后将列表添加到文档中。以下是示例代码：

const fruits = ['apple', 'banana', 'orange'];

const ul = document.createElement('ul');

for (let i = 0; i < fruits.length; i++) {
  const li = document.createElement('li');
  li.textContent = fruits[i];
  ul.appendChild(li);
}

document.body.appendChild(ul);

以上代码会在文档中创建一个无序列表，其中包含三个水果的名称。

使用 map 方法

我们还可以使用数组的 map 方法来将每个数组元素转换为列表项，并将所有列表项添加到列表元素中。以下是示例代码：

const fruits = ['apple', 'banana', 'orange'];

const ul = document.createElement('ul');

fruits.map((fruit) => {
  const li = document.createElement('li');
  li.textContent = fruit;
  ul.appendChild(li);
});

document.body.appendChild(ul);

以上代码会生成与上面示例相同的无序列表。

使用 innerHTML 属性

如果我们的数组包含的是简单的、无需任何处理的字符串，我们可以使用 innerHTML 属性直接将整个列表内容生成，并将其添加到文档中。以下是示例代码：

const fruits = ['apple', 'banana', 'orange'];

const ul = `<ul>${fruits.map((fruit) => `<li>${fruit}</li>`).join('')}</ul>`;

document.body.innerHTML = ul;

以上代码会生成与上面示例相同的无序列表。

无论我们使用哪种方法，创建 HTML 列表都很简单。根据数据和具体情况的不同，我们可以选择适合浏览器和应用程序的方法来实现。