Check box won't append

Question

So the HTML has these elements, there can be a random number of them. I would simply like to create a check box, and add it to each element with the class name "username".

So when a new element with the class "username" gets created or when the page is opened. It'll add a check box to it.

Here's my script.

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];
}

It doesn't add the check boxes. Can someone help me understand why and possibly help me with my script.

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>