创建图像并将其附加到 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()< /code> 返回 实时 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.

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

可以在 MDC 网站。