AppendChild in `for` 循环或 `forEach `

Question

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

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

}

Answer 2

您需要调用cloneNode()withtrue来克隆它的后代/子代。

同样首先获取元素列表一次，然后遍历它并附加按钮，就像。

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

)