Создание изображения и добавление его в div.В чем дело?

Question

Итак, я хочу собрать изображения на странице и добавить их в всплывающее окно.Вот что я делаю ...

var images = document.getElementsByTagName('img');
for(var i=0;i<images.length;i++){
      var div = document.getElementById('thediv');
      var img = document.createElement('img');
      img.src = images[i].src;
      div.appendChild(img);
}

, но

div.appendChild(img);

не работает и все ломает.Я могу это закомментировать, и все остальное, что у меня есть (например, всплывающее окно), работает нормально, поэтому я знаю, что с этой строкой что-то не так, но я не уверен, что с ней не так.Итак, мой вопрос: что я делаю не так с этой строкой?

Answer 1

Проблема в том, что getElementsByTagName() возвращает live NodeList, , который автоматически добавляет любые новые элементы, которые соответствуют селектору (в данном случае любому элементу img) его коллекции.

Из-за этого вы попадаете в бесконечный цикл (так как размер images увеличивается на 1 с каждой итерацией). Самый простой способ исправить это (с одним массовым предупреждением ) - просто кэшировать размер images коллекции до того, как вы начнете добавлять больше;

var images = document.getElementsByTagName('img');
var len = images.length;
for(var i=0;i<len;i++){
      var div = document.getElementById('thediv');
      var img = document.createElement('img');
      img.src = images[i].src;
      div.appendChild(img);
}
// to see what happens, try alerting images.length now to see the length has changed.

Однако , это предполагает, что вновь добавленные элементы будут добавлены в end из NodeList; однако это только случай, когда добавленный элемент является последним в DOM (который обычно не будет иметь место / не может быть гарантировано).

Из-за этого вам в итоге приходится копировать NodeList, возвращенный в массив, и , а затем итерировать по этому;

// Create an array
var images = [];

// Copy the result of getElementsByTagName in to the array
for (var i=0, ar = document.getElementsByTagName('img');i<ar.length;i++) {
    images.push(ar[i]);
}

for(var i=0;i<images.length;i++){
      var div = document.getElementById('thediv');
      var img = document.createElement('img');
      img.src = images[i].src;
      div.appendChild(img);
}

Менее сухую (по сравнению со спецификацией W3!), Которая объясняет это более подробно, можно найти на сайте MDC .