如何使用JavaScript将label、复选框正确嵌套到对应<li>元素内部

元素嵌套错位是因为appendChild的挂载目标设置错误，同时存在一行无效冗余代码：

• 当前代码直接把label、checkbox和li（对应变量option）同级挂载到ul元素（对应变量q）下，自然无法形成嵌套关系
• 代码中checkBoxId.htmlFor = option;完全无效：checkBoxId是字符串类型，不存在htmlFor属性，这行执行后不会产生任何效果，可直接删除

调整元素挂载顺序：先把label和checkbox挂载到li元素内部完成组装，再把组装好的li整体挂载到ul下即可。

修正后的完整代码如下：

var option = document.createElement('li');
var checkbox = document.createElement('input');
var label = document.createElement('label');
var checkBoxId = 'checkbox' + questionNumber + subquestionNumber;
checkbox.type = 'checkbox';
checkbox.id = checkBoxId;
option.className = 'optionName';
label.htmlFor = checkBoxId;
label.appendChild(document.createTextNode('Option ' + subquestionNumber));
// 先将label、复选框挂载到li内部
option.appendChild(label);
option.appendChild(checkbox);
// 最后把组装完成的li挂载到ul
q.appendChild(option);

代码运行后会生成预期的DOM结构，选项文本、复选框都嵌套在对应li元素内部，不会出现同级错位问题：

<ul>
  <li class="optionName">
    <label for="checkbox00">Option 0</label> <input type="checkbox" id="checkbox00" />
  </li>
  <li class="optionName">
    <label for="checkbox01">Option 1</label> <input type="checkbox" id="checkbox01" />
  </li>
</ul>

内容的提问来源于stack exchange，提问作者Chris Costa