爲什麼這個小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");