JavaScript 文本节点

Question

尝试用 javaScript 创建基本测验。我下面的代码似乎只输出单选按钮，而不输出随附的标签。为什么是这样？完整内容如下 fiddle 。谢谢

while(i<length){
    var radioBtn = document.createElement("input");
    var label = document.createElement("label");
    radioBtn.setAttribute('type','radio');
    radioBtn.id = i;
    label.appendChild(document.createTextNode(data[0].choices[i]));
    radioBtn.appendChild(label);
    form.appendChild(radioBtn);
 i++
}

Answer 1

您正在尝试将标签放入输入中。输入不能有子节点。

您想要将输入放入标签内。

这就是您应该追求的目标:

<label>
    <input type="radio">
    Hello
</label>

这就是您的代码尝试执行的操作:

<input type="radio">
    <label>
        Hello
    </label>
</input>

更改:

label.appendChild(document.createTextNode(data[0].choices[i]));
radioBtn.appendChild(label);
form.appendChild(radioBtn);

至

label.appendChild(radioBtn);
label.appendChild(document.createTextNode(data[0].choices[i]));
form.appendChild(label);