appendChild creates a new node

Question

I've got this code:

var label = document.createElement("label");

var input_element = document.createElement("input");
input_element.setAttribute("type","checkbox");
input_element.setAttribute("name",val.x_name);
input_element.setAttribute("value",val.x_name);

label.appendChild(input_element);
label.innerHTML += val.x_display;

ta.form.appendChild(label);
ta.inputs.push(input_element);

The point of it is to create a checkbox element, add it to a form, and then stuff it in an array for easy checking later. The problem is, by the time I reach the end of this code, input_element does not reference the element that is present on the page. I've verified this in Chrome's debugger, the element referenced by input_element is different than the one that is the child of the label element.

Answer 1

I think the dereference happens when you do label.innerHTML += val.x_display; since you're changing the HTML string, thus causing a DOM rewrite.

Try

label.appendChild(input_element);
label.appendChild(document.createTextNode(val.x_display));

Answer 2

input_element = label.appendChild(input_element);