使用javascript生成复选框

Question

我编写了这段JavaScript代码来生成复选框：

ques = document.getElementById("question");
var q = ques.appendChild(document.createElement("ol"));
q.appendChild(document.createTextNode(allQuestions[0].question));
var list = ques.appendChild(document.createElement("ul"));
for(var i = 0; i < 4; i++)
    {
        var option = list.appendChild(document.createElement("input"));
        option.type = "checkbox" ;
        list.appendChild(document.createTextNode(allQuestions[0].choices[i]));
        list.appendChild(document.createElement("br"));
    }

这导致以下输出：

生成的HTML是：

<input type="checkbox">
David Cameron
<br>
<input type="checkbox">
Gordon Brown
<br>
<input type="checkbox">
Winston Churchill
<br>
<input type="checkbox">
Tony Blair
<br>
</ul>

输出看起来很好，但我认为结果HTML不正确。应该是这样的：

<input type="checkbox" >David Cameron<br>

可能两者都是相同的，可能会有所不同。我不确定。有人能告诉我区别吗？ 如果有更好的方法来生成复选框，也请建议改进​​我的代码。

编辑：我的问题不是关于空白。在HTML中，我的代码生成复选框，并且前面的文本未连接。我觉得他们应该有点绑定，因为复选框是文本。他们是否有任何可能的方法将文本与复选框相关联？

Answer 1

将复选框与其相关联的常用方法是使用label和for属性：

<input type="checkbox" id="foo" value="David Cameron">
<label for="foo">David Cameron</label>

请注意value属性，该属性必须填写您的文字或与其相关的任何内容，例如数据库中的文字id。