使用javascript生成复选框答案

【问题标题】：Generating checkbox using javascript使用javascript生成复选框
【发布时间】：2014-10-29 01:52:38
【问题描述】：

我编写了这段 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 中，我的代码生成了复选框，并且它前面的文本没有连接。我觉得它们应该被绑定，因为复选框是文本的。他们是否有任何可能的方法将文本与复选框相关联？

【问题讨论】：

在你的情况下没有区别。如果将这些复选框设置为显示可能会出现问题：inline-block;
When does whitespace matter in HTML? 的可能重复项
@sphanley ：请检查编辑。
建议副本中的第一个示例涵盖了将元素放在同一行与在自己的行上的区别。在您的情况下，一个元素是文本节点而不是括号中的元素，但它仍然是同一个问题。
无论它们是否在同一行，它们都不“相互关联”。如果您只有一个输入和一个文本节点，它们是两个元素，它们只是彼此相邻呈现，一个输入和一个文本节点，并且将它们放在一行或单独的行之间是否有任何区别已得到解决在我链接到的问题中。你对将它们放在同一条线上以某种方式“关联”它们的想法感到困惑，但这不是真的。这与链接问题中的示例 1 完全相同，只是其中一个元素是文本节点。

标签： javascript html checkbox

【解决方案1】：

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

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

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

【讨论】：

所以我应该使用 label 然后 createTextNode 插入文本？
是的，这是干净的方法:)。您也可以附加标签，然后使用insertHTML 将文本插入其中，但在for 循环中它存在性能问题，因此createTextNode 更好。