d3标签和复选框的链接顺序

Question

我的问题是this post的补充，但由于我的声誉不高，因此无法在评论中提出！

我试图使用d3动态创建复选框和标签。使它与标签+复选框一起使用很容易。我想做的就是通过复制以下HTML代码将复选框放在标签前：

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

上述文章中的解决方案有效，但是我不明白为什么链式（嵌套选择/追加）版本不起作用？ （即下面的代码）

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

我希望代码在输入后添加标签的文本，但不会这样做。有人可以解释为什么吗？我想念什么吗？