html不工作

Question

我使用JavaScript为每个按钮创建了3个radio按钮和一个label。当我尝试使用for在标签中添加htmlFor时，它不会将其应用于实际的DOM元素。这意味着，当我尝试使用网页上的label时，它不会选择radio按钮。

我查看了开发者工具，发现labels没有for应用于他们。

我做错了什么，我该如何解决？

JSFiddle

var _doc = document,
  sliderWrapper = _doc.getElementById('sliderWrapper'),
  radioWrapper = _doc.createElement('div');

for (var i = 0; i < 3; i++) {
  var radio = _doc.createElement('input');
  var niceRadio = _doc.createElement('lable');
  var index = radioWrapper.children.length / 2;

  niceRadio.className = 'niceRadio';
  niceRadio.htmlFor = radio.id = 'sliderRadio' + index;
  radio.type = 'radio';
  radio.name = 'myName';

  radioWrapper.appendChild(radio);
  radioWrapper.appendChild(niceRadio);
  console.log(niceRadio.htmlFor);
}

sliderWrapper.appendChild(radioWrapper);

.niceRadio {
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 50%;
  border: 5px solid orange;
}
.niceRadio:hover {
  border-color: lightblue;
}

<div id="sliderWrapper">
</div>

Answer 1

htmlFor用于将标签绑定到特定的表单元素。但是，它使用该表单元素的id（而不是name）。

来源MDN：

  

HTMLLabelElement.htmlFor属性反映了for的值   内容属性。这意味着这个脚本可访问的属性是   用于设置和读取内容属性的值，即   标签的相关控制元素的ID 。

另外，在你的小提琴中，你拼错了label。

更新了小提琴：https://jsfiddle.net/h09mm827/2/