加载页面后,我想为页面上的每个现有元素附加一个附加元素。
我试过这样的:
var divs=document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
newDiv=document.createElement('div');
divs[i].appendChild(newDiv);
}
只是一个警告,这实际上会卡住浏览器,因为 divs 变量是动态的,每次循环时 divs.length 会变得越来越大。
有没有一种方法可以在 DOM 第一次正常加载并有机会静态处理元素时确定标签的数量。
到目前为止,我还没有其他解决方案。
非常感谢。 丹尼斯!
最佳答案
问题是 DOM 集合是 live , 当底层文档结构改变时,它会自动反射(reflect)在集合上,这就是为什么当 length
属性被访问时它会包含一个新的长度,一个常见的方法是 缓存 开始循环前的长度:
var divs=document.getElementsByTagName('div');
for(var i = 0, len = divs.length;i<len;i++){
var newDiv = document.createElement('div');
divs[i].appendChild(newDiv);
}
另请注意,您应该使用 var
语句声明所有变量,否则它可能会变成全局变量。
编辑:在这种情况下,由于您附加的是相同标签名称的子节点,集合将被修改,索引将不再匹配,在第一次迭代,索引 1
将引用上一次迭代中的 newDiv
对象,如 @Casey建议在遍历之前将集合转换为普通数组会更安全。
我使用以下函数:
function toArray(obj) {
var array = [];
// iterate backwards ensuring that length is an UInt32
for (var i = obj.length >>> 0; i--;) {
array[i] = obj[i];
}
return array;
}
//...
var divs = toArray(document.getElementsByTagName('div'));
//...
关于javascript - 在循环结构中将元素附加到 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3198540/