Question

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

在将元素添加到DOM之前，您无法找到document.getElementsByClassName()的元素。

只需使用循环将它们添加到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);

现在，您可以querySelector代替containerDiv

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

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

3 个答案: