如何用JavaScript向HTML列表添加独立项？当前数组内容合并显示

你的代码核心问题是只创建了一个<li>元素，把整个数组直接赋值给它的textContent时，数组会默认转成逗号分隔的字符串，所以所有内容都挤在同一个项目符号下。

要实现每个元素对应独立项目符号，需要遍历数组，为每个元素单独创建<li>标签：

方法一：forEach遍历逐个添加 #

let myArray = ["Sugar", "Milk", "Bread", "Apples"]

const arrayList = (arr) => {
    const list1 = document.querySelector("#itemList");
    // 遍历数组每个元素
    arr.forEach(item => {
        const listItem = document.createElement("li");
        listItem.textContent = item;
        list1.appendChild(listItem);
    });
}

arrayList(myArray)

方法二：map批量创建后添加（更高效） #

如果数组元素较多，这种方法能减少DOM操作次数：

let myArray = ["Sugar", "Milk", "Bread", "Apples"]

const arrayList = (arr) => {
    const list1 = document.querySelector("#itemList");
    // 为每个元素生成<li>
    const listItems = arr.map(item => {
        const li = document.createElement("li");
        li.textContent = item;
        return li;
    });
    // 批量添加到列表
    list1.append(...listItems);
}

arrayList(myArray)

两种方法都会为数组里的每个元素生成独立的<li>标签，这样就能得到你期望的每个元素带单独项目符号的效果。

内容的提问来源于stack exchange，提问作者FreddyKruger75