appendChild不是函数，不能将文本添加到多格

Question

就我而言，我有8个div，我想通过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

您必须遍历myItem，而不是尝试在其上使用appendChild。

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

Answer 2

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>