appendChild не является функцией, не может добавлять текст в мульти-div

Question

В моем случае у меня есть 8 делений, и я хочу динамически через javascript добавить текст к каждому из них. Когда я делаю это с использованием querySelector (для одного div), это работает, но для querySelectorAll (каждый из них) это не так. код:

html
            <div class=" bookapp__container">
                    <div class="bookapp__container__item item"></div>
                    <div class="bookapp__container__item item"></div>
                    <div class="bookapp__container__item item"></div>
                    <div class="bookapp__container__item item"></div>
                    <div class="bookapp__container__item item"></div>
                    <div class="bookapp__container__item item"></div>
                    <div class="bookapp__container__item item"></div>
                    <div class="bookapp__container__item item"></div>
            </div>

javascript

let myParagraph = document.createElement('p');
myParagraph.innerHTML = 'Some text';
let myItems = document.querySelectorAll('.item');
myItems.appendChild(myParagraph);

Answer 1

querySelectorAll возвращает коллекцию, поэтому вам нужно перебрать ее и добавить дочерний элемент. Также обратите внимание, что узел не может иметь нескольких родителей, поэтому вам нужно создавать новые p во время каждой итерации

document.querySelectorAll('.item').forEach((item) => {
  let myParagraph = document.createElement('p');
  myParagraph.innerHTML = 'Some text';
  item.appendChild(myParagraph);
})

<div class=" bookapp__container">
  <div class="bookapp__container__item item"></div>
  <div class="bookapp__container__item item"></div>
  <div class="bookapp__container__item item"></div>
  <div class="bookapp__container__item item"></div>
  <div class="bookapp__container__item item"></div>
  <div class="bookapp__container__item item"></div>
  <div class="bookapp__container__item item"></div>
  <div class="bookapp__container__item item"></div>
</div>

Answer 2

вам придется l oop через myItem вместо того, чтобы пытаться использовать appendChild для этого.

myItems.forEach(item => item.appendChild(myParagraph))