创建图像并将其附加到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.

然而,这种假设新添加的元素将被添加到该结束的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网站上找到更详细解释的更少干燥(与W3规格相比!)文章.