AppendChild in `for` 循环或 `forEach `

Question

我有几个类以 single-product 作为类名。我正在尝试使用 appendChild in for loop in javascript 将按钮添加到所有按钮。但它似乎没有用。我不明白为什么？
我正在使用 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 作为参数，但即使这样也没有用。

Answer 1

您需要使用 true 调用 cloneNode() 以克隆其 descendants/children。
同样先获取一次元素列表，然后遍历它并附加按钮，例如。

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

Answer 2

您的程序永远不会进入循环，它还会生成 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));
}

AppendChild in `for` 循环或 `forEach `

AppendChild in `for` loop or `forEach `

javascript

foreach

for-loop

appendchild