`for` 循环或 `forEach` 中的 AppendChild答案

【问题标题】：AppendChild in `for` loop or `forEach ``for` 循环或 `forEach` 中的 AppendChild
【发布时间】：2020-10-18 05:03:46
【问题描述】：

我有几个以single-product 作为类名的类。我正在尝试使用 javascript 中的 for loop 中的 appendChild 将按钮添加到所有按钮。但这似乎不起作用。我不明白为什么？
我使用querySelectorAll 将它们放入一个数组中。
let products = document.querySelectorAll('.single-products') 然后我创建了一个包含我的按钮的元素div。

let button = document.createElement('div');
button.innerHTML = "<a class='btn hero-btn'>Add to cart</a>";
for (let i=0 ; i < products.length ; i++){document.querySelectorAll('.single-product')[i].appendChild(button.cloneNode())

我也尝试了forEach 与this 作为参数，但即使这样也没有用。

【问题讨论】：

标签： javascript for-loop foreach appendchild

【解决方案1】：

您的程序永远不会进入循环，它还会生成 ReferenceError，因为从未定义 products 来查找它的长度。您必须在程序进入 for 循环之前定义它。另一件事是cloneNode() 仅在基本级别创建克隆。您必须使用 cloneNode(true) 来克隆它，它也是后代。这是您的代码的修复：

let button = document.createElement("div");

button.innerHTML = "<a class='btn hero-btn'>Add to cart</a>";

let products = document.querySelectorAll(".single-product");

for (let i = 0; i < products.length; i++) {
  products[i].appendChild(button.cloneNode(true));
}

【讨论】：

【解决方案2】：

您需要使用true 调用cloneNode() 来克隆它的后代/子代。
同样先获取一次元素列表，然后遍历它并附加按钮，就像。

let button = document.createElement('div');
button.innerHTML = "<a class='btn hero-btn'>Add to cart</a>";

let productSections = document.querySelectorAll('.single-product');
for (let i=0 ; i < productSections.length ; i++){
   productSections[i].appendChild(button.cloneNode(true));
)

【讨论】：