javascript 要素動的作成 input label 関連付け

Question

htmlでinputとlabelの関連付けをした記述をすると画面上期待した動きになるのですが、javascriptで動的に要素を作成して関連付けを行うような処理を書いてみても画面上関連づいた動きをしてくれません。htmlとjavascriptの方で作られている要素は同じのはずなのですが、何が問題なのでしょうか？

<div class="contents faq" id="que-div">          
    <h2 id="cate1"></h2>
    <input type="checkbox" id="chk1" class="on-off">
    <label for="chk1"></label>
</div>

//input
_input = document.createElement('input');
_input.type = 'checkbox';
_input.id = 'chk1';
_input.className = 'on-off';
_div.appendChild(_input);
                
//label
_label = document.createElement('label');
_label.for = 'chk1';
_label.innerHTML = question;
_div.appendChild(_label);

Answer 1

単純に、同じidの要素を複数生成してしまった、ということではないでしょうか。

（追記）

forは予約語になっている言語が多いこともあって、JavaScriptから指定する場合はhtmlForと書く、とのことでした（MSDN）。

Comments

[coko1]

どういったことでしょうか？

[maisumakun]

たとえば、「id=chk1」の要素が複数できると、labelで「for=chk1」としても、うまく紐付けることができません。

[coko1]

デバッグモードで確認しましたがidが重複しているということはありませんでした。

[maisumakun]

すみません、回答側に追加しましたが、まったく別な原因だったようです。

[coko1]

出来ました！ずいぶん長い時間悩んでいたのでとてもたすかりました。ありがとうございました