将数组转换为 HTML 列表

简介

在这个实验中，我们将探索如何使用 JavaScript 将数组转换为 HTML 列表。本实验的目的是帮助你理解如何使用 Array.prototype.map() 和 Document.querySelector() 创建 HTML 标签列表，并将它们附加到网页中的现有列表中。完成本实验后，你将更好地理解如何使用 JavaScript 操作 DOM 并创建动态 HTML 内容。

将数组转换为 HTML 列表

要开始编码，请启动终端/SSH 并输入 node。

此函数将给定的数组元素转换为 <li> 标签，并将它们添加到具有给定 id 的列表中。

使用 Array.prototype.map() 和 Document.querySelector() 生成 HTML 标签列表。

const arrayToHTMLList = (arr, listID) =>
  (document.querySelector(`#${listID}`).innerHTML += arr
    .map((item) => `<li>${item}</li>`)
    .join(""));

示例用法：

arrayToHTMLList(["item 1", "item 2"], "myListID");

总结

恭喜你！你已经完成了“将数组转换为 HTML 列表”实验。你可以在 LabEx 中练习更多实验来提升你的技能。