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 content属性的值。 这意味着该脚本可访问的属性用于设置和读取content属性的值，该属性是标签关联的控件元素的ID 。

另外，在您的小提琴中，您拼写了label 。

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