在`for`循环或`forEach`中的AppendChild

问题描述

我有几个班级，single-product为className。我正在尝试使用JavaScript appendChild中的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作为参数的this，但即使这样也没有用。

解决方法

您需要使用@client.command() async def channels(ctx): voice_channel_list = ctx.guild.voice_channels # ... 来调用cloneNode()与它的后代/孩子一起克隆。
同样，首先获取一次元素列表，然后对其进行遍历并添加按钮，例如。

true

,

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