AppendChild к каждому элементу класса - PullRequest
Новая
       42

AppendChild к каждому элементу класса

0 голосов
/ 31 января 2020

Я хочу добавить элемент в каждый div класса «актеры», но функция, которую я написал, добавляет элемент только в последний элемент с классом «актеры» (на моей странице их два). Не могли бы вы помочь мне, как правильно добавить ребенка в JS, пожалуйста? 

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);
    }
}```

1 Ответ

7 голосов
/ 31 января 2020
Элемент

передается по ссылке, поэтому он перемещается в 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>
...