使用querySelectorAll给多div加文本报错：appendChild is not a function

嘿，我来帮你搞定这个问题！你遇到的报错“appendChild is not a function”，原因很简单：

document.querySelectorAll('.item')返回的不是单个DOM元素，而是一个NodeList（节点集合），它是多个元素的集合，而appendChild()是单个DOM元素才有的方法，直接在集合上调用自然会报错啦。

正确的做法：遍历集合，给每个元素单独添加内容 #

而且这里还要注意一个小坑：如果直接复用同一个myParagraph元素，appendChild会把它从之前的元素里移到下一个元素中，最后只有最后一个div会显示文本。所以我们需要给每个div克隆一个新的p标签。

下面给你两种可行的实现方式：

方式1：用forEach遍历NodeList

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

// 遍历每个item元素
myItems.forEach(item => {
  // 克隆p标签（true表示连子节点一起克隆）
  let newPara = myParagraph.cloneNode(true);
  item.appendChild(newPara);
});

方式2：用传统for循环遍历

如果你需要兼容一些不支持NodeList.forEach的旧浏览器，也可以用for循环：

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

for (let i = 0; i < myItems.length; i++) {
  let newPara = myParagraph.cloneNode(true);
  myItems[i].appendChild(newPara);
}

这样每个div就都会被添加上你想要的文本啦！

内容的提问来源于stack exchange，提问作者Kacper Faligowski