Javascript 在循环结构中将元素附加到DOM

加载页面后，我想为页面上的每个现有元素添加一个附加元素

我试过这样的方法：

    var divs=document.getElementsByTagName('div');

    for(i=0;i<divs.length;i++){
        newDiv=document.createElement('div');
        divs[i].appendChild(newDiv);
    }

var divs=document.getElementsByTagName（'div'）；
对于（i=0；i而言，问题在于DOM集合是，当底层文档结构更改时，它将自动反映在集合上，这就是为什么当访问
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);
}

正如您所说，
divs
变量是动态的，因此在使用它之前必须将其转换为数组（静态）

var nodeList = document.getElementsByTagName('div');
var divs = [];
for (var i = 0; i < nodeList.length; i++)
    divs.push(nodeList[i]);
// loop again and append the other divs

但是遗憾的是，这种方法在IE中不起作用。
使用，这是非常简单的。您可以获得对页面上所有现有div或任何其他元素的引用，然后非常轻松地附加一个新元素，而无需创建显式循环。希望这有帮助

$('div').each(function(){
   var newDiv = document.createElement('div');
   $(this).append(newDiv);
});

document.getElementsByTagName（）
不返回普通数组，而是返回
HtmlCollection
的实例，其行为类似于数组，但实际上为文档中具有给定元素名称的所有元素提供某种视图

因此，每当您在DOM中插入内容时，
divs
的length属性当然也会更新

所以，除了这里的其他答案之外，这种行为现在应该是有意义的；-）
我不知道它们是活的+谢谢你教我新东西；）live系列是如何成长的？执行divs[0].appendChild（newDiv）时，newDiv是出现在divs[1]中还是出现在divs[divs.length-1]中？Casey Hope建议我创建一个原始div数组，然后对其进行迭代，这样我会觉得更安全。它是否只有在访问
长度时才会更新？因此，如果我将一个子元素附加到元素n，元素n+1将具有与以前相同的索引，只要我不访问
length
？应该添加的是，
divs
是
HtmlElementCollection
的一个实例，而不是一个普通数组（正如人们所期望的那样）。@Marius-
divs
将按文档顺序包含div，因此，示例中的
newDiv
将出现在
divs[1]
中@jasongetsdown-如果它只在访问length属性时更新，那么这将是一个bug。此外，我不确定DOM规范是否要求实现者使用规范中的确切名称，如
NodeList
，
HTMLCollection
等，只要它们遵循确切的接口即可。因此
getElementsByTagName
必须返回符合接口的对象。这不是问题的答案，但您应该在循环之前调用
var newDiv
。创建一个没有
var
的变量会生成一个全局变量。不一定在循环之前
var divs = Array.prototype.slice.call(document.getElementsByTagName('div'));

$('div').each(function(){
   var newDiv = document.createElement('div');
   $(this).append(newDiv);
});