Javascript 复选框文本不可见

我一直在寻找我的问题的可能根源，但一直无法做到这一点

我有一些java脚本，可以动态创建复选框列表。有些有文本，有些有锚定链接，里面有文本

看起来是这样的：

 createCheckbox: function (checkBoxDiv, sensorName, sensorId, checked, makeHyperLink, guid) {
        var liElement = document.createElement("li");
        var checkBoxElement = document.createElement("input");
        checkBoxElement.setType = "checkbox";
        checkBoxElement.name = "sensorName";
        checkBoxElement.id = "check" + sensorId;
        checkBoxElement.setAttribute("type", "checkbox");
        checkBoxElement.setAttribute("runat", "server");
        checkBoxElement.setAttribute("onchange", "OnCheckedChangedMethod('" + sensorName + "')");
        if (checked)
            checkBoxElement.setAttribute("checked", "true");
        if (makeHyperLink) {
            var linkElement = document.createElement("a");
            linkElement.setAttribute("style", "color:white;");
            linkElement.setAttribute("href", "#");
            linkElement.id = "link" + sensorId;
            linkElement.text = "" + sensorName;
            checkBoxElement.appendChild(linkElement);
        } else {
            checkBoxElement.setAttribute("text", sensorName);
        }
        liElement.appendChild(checkBoxElement);
        this.checkboxes++;
        return liElement;
}

这将返回要附加到my

div

的元素

它会正确创建此列表，

HTML

如下所示：

<ol id="sensorList"><li>
      Sensors
    </li><li><input id="check1" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('0-Predator Simulator (FLIR)')" checked="true"><a id="link1" style="color:white;" href="#">
      Item1
    </a></input></li><li><input id="check2" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('a')"><a id="link2" style="color:white;" href="#">
      Item2
    </a></input></li>
</ol>

传感器

该网页如下所示：

 createCheckbox: function (checkBoxDiv, sensorName, sensorId, checked, makeHyperLink, guid) {
        var liElement = document.createElement("li");
        var checkBoxElement = document.createElement("input");
        checkBoxElement.setType = "checkbox";
        checkBoxElement.name = "sensorName";
        checkBoxElement.id = "check" + sensorId;
        checkBoxElement.setAttribute("type", "checkbox");
        checkBoxElement.setAttribute("runat", "server");
        checkBoxElement.setAttribute("onchange", "OnCheckedChangedMethod('" + sensorName + "')");
        if (checked)
            checkBoxElement.setAttribute("checked", "true");
        if (makeHyperLink) {
            var linkElement = document.createElement("a");
            linkElement.setAttribute("style", "color:white;");
            linkElement.setAttribute("href", "#");
            linkElement.id = "link" + sensorId;
            linkElement.text = "" + sensorName;
            checkBoxElement.appendChild(linkElement);
        } else {
            checkBoxElement.setAttribute("text", sensorName);
        }
        liElement.appendChild(checkBoxElement);
        this.checkboxes++;
        return liElement;
}

我已经尝试删除所有css，以防与此相关，并将文本嵌套在其他标记中：

，
，但没有任何变化

任何关于这个问题的根源的想法。我对网络编程还是相当陌生的

谢谢
输入
元素不能有子元素。因此：

checkBoxElement.appendChild(linkElement);

这是不正确的。
而是使用包含复选框和链接的标签元素：

var labelElement = document.createElement("label");
labelElement.appendChild(checkBoxElement);
labelElement.appendChild(linkElement);

编辑：
不能单击链接元素来更改复选框的选中状态。因为它会刷新页面（使用
href='#'
）。您想对链接元素做什么
 您可以添加一个JSFIDLE来演示吗？还有，你为什么要把runat=server放在那里？很好的理解，（对我来说）编写html的可怕方式阻止了我看到
输入中的嵌套
我正在使用委托为单击事件分配函数谢谢，我不知道你不能有输入的子项，为什么这是“[a]写html的可怕方式“@DavidThomas，这样我就可以改进它。使用jQuery可以拯救你的生命。@Zeb:好吧，这就是我格式化它的方式。（尽管要记住它仍然是无效的HTML，所以它应该是这样的：（尽管
标签可以根据您自己的喜好/用例在前面或后面）