AppendChild 到 Class 的每个元素

Question

我想向 class "actors" 的每个 div 添加一个元素，但我编写的函数仅在最后一个元素中添加元素 class "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

元素通过引用传递，因此它在 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>

AppendChild 到 Class 的每个元素

AppendChild to each element of Class

html

javascript

appendchild