javascript - 复选框不会附加

Question

所以 HTML 有这些元素，它们的数量可以是随机的。我只想创建一个复选框，并将其添加到类名为“username”的每个元素中。

因此，当创建具有“用户名”类的新元素或打开页面时。它会向其添加一个复选框。

这是我的脚本。

var chec = document.createElement("div");     //Creates the div..
chec.innerHTML = '<input type="checkbox" value="test">'; //Create checkbox

var addc = document.querySelector("span[class='username']") // username Element.

var i;
for (i = 0; i < addc.length; i++) {
chec += addc[i];
}

它不添加复选框。有人可以帮助我理解原因并可能帮助我编写脚本。

Answer 1

var addc = document.querySelectorAll("span.username") // Get all elements with class "username"

for (var i = 0; i < addc.length; i++) {
  var div = document.createElement("div");
  var check = document.createElement("input");
  check.type = "checkbox";
  check.value = "test";
  div.appendChild(check);
  addc[i].appendChild(div);
}

<span class="username"></span>

<span class="username"></span>

<span class="username"></span>