動的にlabel + checkboxを作る

 <div id="kuromaku">
  <input id="kuro" type="checkbox" value="1" name="kuro"/>
  <label for="kuro">黒幕</label>
 </div>

こう書くと、文字をクリックしてもチェックボックスのon/offできる。
それをJavaScriptで動的に作る方法。

まずは、駄目なパターン。(ちなみに、IEだけ駄目)

var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('id', 'kuro');
input.setAttribute('name', 'kuro');
input.setAttribute('value', '1');
var label = document.createElement('label');
label.setAttribute('for', 'kuro');
label.appendChild(document.createTextNode('黒幕'));
var divNode = getElementById('kuromaku');
divNode.appendChild(input);
divNode.appendChild(label);

どこが駄目かというと、ここ。

label.setAttribute('for', 'kuro');

正しくは、こう書く。

label.htmlFor = 'kuro';