innerHTMLで生成する要素 + onchangeを組み合わせた時に発生するバグ

バグが発生した状況

var li = document.createElement("li");
var Id = "example";

li.innerHTML = "<div>"
+ "<select onchange=\"dijit.byId("\"+ Id +""\).test(this);\">"
+ "<option>・・(省略)・・</option>"
+ "</select>"
+ "</div>";

ul.appendChild(li);

1. cleateElementで要素を生成

2. １の要素にinnerHTMLでselectタグを追加

3. selectタグにonchange＝”処理”を追加

発生したバグ

出力結果に意図しない半角スペースが挿入されてしまいjavascriptが動作しない。

<select onchange=\"dijit.byId(" example").test(this);\">
                               ↑ここにスペースが入ってしまう

改善方法

selectタグもcleateElementで生成してsetAttributeでonchangeをセットする。

var li = document.createElement("li");
var Id = "example";
var select = document.createElement("select");

select.setAttribute('onchange', 'dijit.byId("' + Id + '").test(this);');
select.innerHTML = "<option>・・(省略)・・</option>"
+ "</select>";

li.innerHTML = "<div>" + "</div>";

li.appendChild(select);
ul.appendChild(li);