Почему этот небольшой javascript не работает?

Question

У меня есть несколько экземпляров div с идентификатором «myDiv» на странице. Я хочу заменить содержимое этих 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> 

Он заменяет только содержимое внутри одного из этих див и не все из них. Если вместо этого я использую функцию .html() jquery, она заменяет содержимое всех div. Есть ли способ, которым я могу заставить вышеупомянутые js работать одинаково?

Answer 1

Значения id должны быть уникальными - вы не можете иметь более одного идентификатора с тем же именем и обновлять все из них.

Answer 2

У меня есть несколько экземпляров div с идентификатором «myDiv» на странице.

Это то место, где вы делаете это неправильно. Вы не можете присвоить идентификатор нескольким элементам на странице - он должен быть уникальным.

Это только заменяет содержимое внутри одного из этих div и не всех из них.

Это происходит из-за того, что getElementById() возвращает только элемент с первым совпадением в случае соответствия нескольких таких элементов.

---

Чтобы решить эту проблему, назначить класс вместо ID к дивы вы хотите цели, и если вы можете использовать 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

Идентификаторы должны быть уникальными. Вы можете использовать одно и то же имя класса для всех div, а затем использовать селектор css.

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

Для примера. В JQuery вы можете:

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