Javascript 如何将某个类的所有元素附加到DOM中

我想将类“active_element”的所有元素附加到document.body

我如何做到这一点：

var element1 = document.createElement('div');
element1.classList.add('active_element');

var element2 = document.createElement('div');
element2.classList.add('active_element');

document.body.appendChild(element1);
document.body.appendChild(element2);

使用循环：

var element1 = document.createElement('div');
element1.classList.add('active_element');

var element2 = document.createElement('div');
element2.classList.add('active_element');

var active_elements = document.getElementsByClassName('active_element');
for (i=0; i<active_elements.length; i++) {
    document.documentElement.appendChild(active_elements[i]);
} // doesn't seem to work

var element1=document.createElement（'div'）；
element1.classList.add（'active_元素'）；
var element2=document.createElement（'div'）；
element2.classList.add（'active_元素'）；
var active_elements=document.getElementsByClassName（'active_element'）；
对于（i=0；i，在将元素添加到DOM中之前，您无法找到具有
document.getElementsByCassName（）
的元素

只需使用循环将它们添加到DOM中，而不是将它们分配给变量

const divCount = 2;
for (i = 0; i < divCount; i++) {
    var element = document.createElement('div');
    element.classList.add('active_element');
    document.documentElement.appendChild(element);
}

然后，稍后在数组中循环

active_elements.forEach(e => document.documentElement.appendChild(e));

element1
和
element2
还不是文档的一部分

如果您没有将
div
s的创建延迟到final
appendChild
的选项，请尝试以下方法

首先将这两个附加到虚拟
div
中

var containerDiv = document.createElement('div');
var element1 = document.createElement('div');
element1.classList.add('active_element');
var element2 = document.createElement('div');
element2.classList.add('active_element');
containerDiv.appendChild(element1);
containerDiv.appendChild(element2);

现在您可以在
containerDiv
上执行
querySelector
，而不是
文档

//var active_elements = containerDiv.querySelectorAll('.active_element'); //you can use this as well.
var active_elements = containerDiv.getElementsByClassName('active_element');
for (i=0; i<active_elements.length; i++) 
{
    document.documentElement.appendChild(active_elements[i]);
}

//var active_elements=containerDiv.querySelectorAll（'.active_element'）；//您也可以使用它。
var active_element=containerDiv.getElementsByClassName（'active_element'）；
对于（i=0；i首先，我建议您将所有元素添加到documentFragment容器中

for (i=0; i<active_elements.length;i++){document.body.appendChild(active_elements[i]);} 

之后，您应该查询该容器并获取所有元素

之后，只需将元素添加到document.body容器中

for (i=0; i<active_elements.length;i++){document.body.appendChild(active_elements[i]);} 

for（i=0；ii如果OP有延迟创建
div
直到最终
appendChild
的选项，那么这是一个更好的答案