如何将类为active_element的所有元素追加到DOM？循环代码失效排查

咱们先看看你写的循环代码为啥没工作——这里有两个关键问题：

问题1：刚创建的元素还没加入DOM，无法被getElementsByClassName捕获 #

你创建了element1和element2，但没有先把它们添加到DOM树里，这时候调用document.getElementsByClassName('active_element')得到的是一个空集合，循环当然不会执行任何操作。

问题2：getElementsByClassName返回的是动态集合，循环时会出现元素遗漏 #

假设这些元素已经在DOM里了，getElementsByClassName返回的是动态HTMLCollection——当你把某个元素append到body时，它会从原来的位置被移除，集合的长度会实时变化，导致循环过程中跳过部分元素。

解决方案1：先把创建的元素存入数组，再循环追加 #

如果是自己创建的元素，直接用数组存起来再循环就好，不用去DOM里查找：

// 创建元素
var element1 = document.createElement('div');
element1.classList.add('active_element');
var element2 = document.createElement('div');
element2.classList.add('active_element');

// 存入数组
var activeElements = [element1, element2];

// 循环追加到body
activeElements.forEach(function(el) {
    document.body.appendChild(el);
});

解决方案2：用静态集合获取已存在于DOM中的元素 #

如果是要处理已经在DOM里的.active_element元素，用document.querySelectorAll('.active_element')——它返回的是静态NodeList，不会因为DOM变化而实时改变，循环更安全：

// 假设元素已经在DOM中
var activeElements = document.querySelectorAll('.active_element');

// 循环追加到body
activeElements.forEach(function(el) {
    document.body.appendChild(el);
});

如果一定要用getElementsByClassName，可以先把动态集合转成静态数组：

var activeElements = Array.from(document.getElementsByClassName('active_element'));
// 或者用扩展运算符：var activeElements = [...document.getElementsByClassName('active_element')];

activeElements.forEach(function(el) {
    document.body.appendChild(el);
});

另外补充：appendChild会把元素从原来的位置移动到目标位置，如果是想复制元素而不是移动，要先用cloneNode(true)创建副本再追加哦。

内容的提问来源于stack exchange，提问作者sachiro