AppendChild 到 Class 的每個元素

Question

我想將一個元素附加到“actors”類的每個 div 中，但是我編寫的函數只在最后一個元素中添加了“actors”類的元素（我的頁面中有兩個）。 你能幫我如何在 JS 中正確 appendChild 嗎？

async function addActor() {
    let actor_name = document.getElementById("actor_name").value;
    let element = document.createElement("p");
    element.innerHTML = `<p>${actor_name}<input id="scriptText" style="width: 40px;" type="text" name="" value="0"></p>`;
    console.log(element);
    let collection = document.getElementsByClassName("actors");


    for(let item of collection){
        await item.appendChild(element);
        console.log(item.innerHTML);
    }
}```

Answer 1

element 是通過引用傳遞的，所以它在 foreach 中移動到div1然后div2 ，依此類推...

在foreach loop創建元素，它將起作用

 async function addActor() { let actor_name = document.getElementById("actor_name").value; let collection = document.getElementsByClassName("actors"); for(let item of collection){ let element = document.createElement("p"); element.innerHTML = `<p>${actor_name}<input id="scriptText" style="width: 40px;" type="text" name="" value="0"></p>`; await item.appendChild(element); } }

 <input id="actor_name" /> <button onclick="addActor()">Add</button> <div class="actors">actors 1: </div> <div class="actors">actors 2: </div> <div class="actors">actors 3: </div> <div class="actors">actors 4: </div>