尝试将子类添加到具有相同类名的所有元素

Question

我试图使用appendChild()方法将document.createElement("div")元素添加到具有相同类名的多个<div>元素。

我已经试过这样：

const childElement = document.createElement("div"); 
childElement.className = "second"; 
const parentObject = document.getElementsByClassName("first"); 

[...parentObject].map(parent => parent.appendChild(childElement)) 

其中没有工作，所以我尝试：

for(let i = 0; i < parentObject.length; i++){ 
    parentObject[i].appendChild(childElement); 
} 

它的工作的唯一办法是，如果我写的html元素自己，然后将其添加到每个父代的innerHTML：

[...parentObject].map(parent => parent.innerHTML = "<div class='second'></div>") 

但是由于我生成所有不同类型的HTML元素标记，如IMG, DIV, SPAN我需要调用createElement()方法的方便。

有没有人有这方面的经验？

Answer 1

一个元素只能存在于DOM中的一个地方。你需要做的是创建一个新的元素添加到每个父：

const parentObject = document.getElementsByClassName('first'); 
 

 
[...parentObject].forEach((parent, i) => { 
 
    const childElement = document.createElement('div'); 
 
    childElement.className = 'second'; 
 
    childElement.innerHTML = `second ${i}`; 
 
    parent.appendChild(childElement) 
 
});

div { padding: 5px; } 
 
.first { background-color: pink; display: inline-block; } 
 
.second { background-color: lightblue; }

<div class="first">first</div> 
 
<div class="first">first</div> 
 
<div class="first">first</div> 
 
<div class="first">first</div>