Javascript更改div中的特定元素

Question

在我的html:

中有这样的内容

<div id="basket">
<div id="item">Apple</div>
</div>
<div id="basket">
<div id="item">Orange</div>
</div>
<div id="basket">
<div id="item">Banana</div>
</div>
// And so on

我如何能够单独改变每个'项目'div的innerHTML ?例如，如何将写着"banana"的div更改为其他内容?

Answer 1

正如已经在评论中提到的，ID必须是唯一的，所以您必须将它们更改为类。

那么为了解决您的问题，您可以使用querySelectorAll来选择所有具有item类的元素。然后使用forEach循环并检查每个元素的innerHTML。如果匹配"香蕉"您可以重写innerHTML(出于安全考虑，应该使用textContent):

document.querySelectorAll('.item').forEach(el =>  {
if (el.textContent == 'Banana') {
el.textContent = 'The Minions ate the Banana';
}
})

<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>