如何将某个 class 的所有元素附加到 DOM

Question

我想将 class '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

Answer 1

您无法找到具有 document.getElementsByClassName() 的元素，直到将它们添加到 DOM。

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

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

如果您需要在附加 DIV 的不同时间创建它们，您可以将它们放入一个数组中。

active_elements = [];
var element1 = document.createElement('div');
element1.classList.add('active_element');
active_elements.push(element1);

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

然后循环数组。

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

Answer 2

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

如果您没有将 div 的创建延迟到最终 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 而不是 document

//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]);
}

Answer 3

首先，我建议您将所有元素添加到 documentFragment 容器中。

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

之后，只需将您的元素添加到 document.body 容器中即可。

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

如何将某个 class 的所有元素附加到 DOM

How to append all elements of a certain class to the DOM

javascript

appendchild