JavaScript如何单独修改div内指定item元素的innerHTML内容

首先先纠正你现有代码的一个规范问题：HTML中id属性要求全局唯一，同一页面内不能出现多个相同id的元素，你当前重复使用id="basket"、id="item"的写法不符合标准，很容易导致DOM选择异常，建议先把重复id替换为class类名，修正后的参考结构如下：

<div class="basket">
    <div class="item">Apple</div>
</div>
<div class="basket">
    <div class="item">Orange</div>
</div>
<div class="basket">
    <div class="item">Banana</div>
</div>
<!-- 其余同类结构 -->

在此基础上，你可以根据不同的需求场景选择对应的方法修改指定元素的内容：

• 按文本内容匹配修改（比如你提到的修改内容为Banana的元素）
  遍历所有item元素，匹配到对应文本的元素后直接修改innerHTML即可：

  // 选中页面所有item元素
  const itemList = document.querySelectorAll('.item');
  itemList.forEach(item => {
      // 去除文本前后空格做精准匹配，需要忽略大小写可以把两边值都转成小写再对比
      if (item.textContent.trim() === 'Banana') {
          item.innerHTML = '替换后的目标内容';
          // 确认只有一个匹配项的话，可以在这里加return终止后续遍历
      }
  })
  

• 按位置顺序修改（比如修改第三个item）
  querySelectorAll返回的节点列表顺序和元素在页面中出现的顺序完全一致，索引从0开始计数，直接按下标取值即可：

  const itemList = document.querySelectorAll('.item');
  // 第三个元素对应索引2
  itemList[2].innerHTML = '第三个元素的新内容';
  

• 修改指定父容器下的item（比如修改第二个篮子里的商品）
  可以先选中对应的父级basket容器，再在容器范围内查找item，避免全局匹配干扰：

  // 选中第二个basket容器，索引从0开始，第二个对应下标1
  const targetBasket = document.querySelectorAll('.basket')[1];
  const targetItem = targetBasket.querySelector('.item');
  targetItem.innerHTML = '第二个篮子内元素的新内容';
  

补充说明：如果你暂时不修改重复id的错误写法，用document.querySelectorAll('[id="item"]')也能在多数现代浏览器里选中所有id为item的元素，但这种写法违反W3C标准，可能在部分场景下出现不可预期的问题，强烈建议优先把重复id替换为class。

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