嘗試將子類添加到具有相同類名的所有元素

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>