为什么这个小javascript不工作？

Question

我在一个页面上有一个ID为“myDiv”的div的多个实例。我想替换这些div的内容。当我使用这个JavaScript：

function replaceContent(id, content) { 
    var container = document.getElementById(id); 
    container.innerHTML = content; 
} 

replaceContent('myDiv', 'hello there'); 


<div id="myDiv"></div> 
<div id="myDiv"></div> 
<div id="myDiv"></div> 

，只替换里面这些div之一，而不是全部的内容。如果我使用jquery的.html（）函数来代替所有div的内容。有什么办法可以让上述js以同样的方式工作吗？

Answer 1

id值必须是唯一的 - 您不能有多个具有相同名称的id并更新所有id。

Answer 2

我在页面上有一个ID为“myDiv”的div的多个实例。

这是你做错了的地方。您无法为分配一个ID给页面上的多个元素 - 它必须是唯一的。

它只替换其中一个div的内容，而不是所有的div。

发生这种情况是因为getElementById()只返回匹配多个这种元素的第一个匹配元素。

---

为了解决这个问题，分配类，而不是一个ID到你想要的目标的div的，如果你可以使用jQuery，用这个代替（假设class="myDiv"）：

function replaceContent(className, content) { 
    $('div.' + className).html(content); 
} 

// This appends className so the selector becomes $('div.myDiv') 
replaceContent('myDiv', 'hello there'); 

Answer 3

ID必须是唯一的。您可以对所有div使用相同的类名，然后使用css选择器。

<div id="div1" class="mydivs">blah</div> 
<div id="div2" class="mydivs">blah123</div> 

例如，在jQuery中，你可以这样做：

$('.mydivs').html("whatever");