创建图像并将其附加到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，which will automatically add与选择器（在本例中为任何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.

但，这假设新添加的元素将添加到NodeList的 end ;但是，当添加的元素是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);
}

可以在MDC website上找到更加详细解释的文章（与W3规范相比！）

。