如何使用JavaScript为HTML无序列表的每个列表项添加感叹号？

嘿，我来帮你搞定这个问题！首先得先指出你HTML里的一个关键问题——id属性是唯一的，你给所有<li>都用了id="test"，这不符合HTML规范，浏览器只会识别第一个带这个id的元素，这也是你用数组式for循环没成功的核心原因。

步骤1：修正HTML（可选但推荐） #

虽然我们可以直接选中所有<li>，但为了代码更规范，建议把重复的id改成class（class可以重复使用）：

<ul>
  <li class="list-item">Lemon juice</li>
  <li class="list-item">Watermelon</li>
  <li class="list-item">pomegranet</li>
  <li class="list-item">apple sauce</li>
  <li class="list-item">juice</li>
  <li class="list-item">Lemon juice</li>
</ul>

步骤2：用JavaScript实现需求 #

我们可以用document.querySelectorAll()来获取所有列表项（它会返回一个包含所有匹配元素的NodeList，支持遍历），然后通过循环给每个元素的文本末尾添加感叹号。

方法一：传统for循环（适合习惯数组循环的写法）

// 获取所有列表项（如果改了class就用'.list-item'，没改就直接用'li'）
const listItems = document.querySelectorAll('.list-item');

// 遍历每个元素
for (let i = 0; i < listItems.length; i++) {
  // 获取当前列表项的文本，加上感叹号后重新赋值
  listItems[i].textContent = listItems[i].textContent + '!';
}

方法二：forEach遍历（更简洁的写法）

// 直接获取元素并遍历
document.querySelectorAll('.list-item').forEach(item => {
  // 用+=简化赋值
  item.textContent += '!';
});

为什么你之前的方法失败？ #

如果之前你尝试用document.getElementById('test')来获取元素，它只会返回第一个带有id="test"的<li>，而不是一个包含所有元素的数组/集合，所以循环自然无法作用到所有列表项上。

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