如何使用JavaScript向无序列表添加子列表项？

问题原因 #

你当前的代码逻辑错误在于：每次循环时，querySelector("li")只会找到<ul>里的第一个<li>元素（也就是初始的"Milk"那一项），然后反复替换它的内容，并没有创建新的列表项。所以循环结束后，只会保留最后一次赋值的"mango"。

解决方案 #

要实现每个水果生成独立列表项，需要在循环中创建新的<li>元素，再添加到<ul>中，以下是两种常用方案：

方案1：保留原有列表项（在Milk后添加水果） #

// 获取目标ul元素
const groceryList = document.getElementById("grocery-list");
const fruits = ["apple", "banana", "kiwi", "mango"];

fruits.forEach(fruit => {
  // 1. 创建新的li元素
  const newListItem = document.createElement("li");
  // 2. 设置li的文本内容（textContent比innerHTML更安全，适合纯文本场景）
  newListItem.textContent = fruit;
  // 3. 将新li添加到ul的末尾
  groceryList.appendChild(newListItem);
});

方案2：替换原有列表项（清空后只显示水果） #

如果想去掉初始的"Milk"，只显示数组里的水果，可以先清空<ul>内容，再添加新项：

const groceryList = document.getElementById("grocery-list");
const fruits = ["apple", "banana", "kiwi", "mango"];

// 先清空ul内的所有现有内容
groceryList.innerHTML = "";

fruits.forEach(fruit => {
  const newListItem = document.createElement("li");
  newListItem.textContent = fruit;
  groceryList.appendChild(newListItem);
});

额外提示 #

• 提前把<ul>元素存到变量里，避免每次循环重复查询DOM，能提升代码性能。
• 优先使用textContent设置纯文本内容，避免innerHTML可能带来的XSS安全风险。

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