d3 order of label and checkbox chained

My question is complimentary for this post, but since I do not have enough reputation, I could not ask it in a comment!

I was trying to create checkboxes and labels dynamically using d3. Getting it to work with label + checkbox is easy. What I wanted to do was to put the checkbox before label by replicating this HTML code:

<label><input type="checkbox" id="checkbox1">Option 1</label>

The solution in the aforementioned post works, but I don't understand why the chained(nested selection/append) version is not working? (i.e. the code below)

var temp = item.append("label");

temp.append("input")
    .attr("type", "checkbox")
    .attr("checked", true)
    .attr("id", function (d,i) {
        return "checkbox" + i;
    })
    .on("click", function (d,i) {
        ....
    });
temp.text(function (d) {
        return d.text;
    });

I expect the code to add the label's text after input but it does not do so. Can someone please explain why? Am I missing something?