javascriptのinnerHTMLによる要素の書き直し

HTMLに動的にdivや文字列、input form、textareaなどを追加する方法
上記のサイトを参考に、innerHTMLにもっと複雑なことを書けないかと思い、例として以下のようなコードを作成しました。(divではなくspanにしています。)

Javascript
1var ele = document.createElement("span");
2ele.innerHTML = '<select name="condition">'; 
3ele.innerHTML += '<option value="0">a</option>';
4ele.innerHTML += '</select>';
5console.log(ele.innerHTML);

コードでinnerHTMLに入れている順番の通り、
<select name="condition"><option value="0">a</option></select>
のようにコンソールに表示されることを期待していたのですが、実際には
<select name="condition"></select><option value="0">a</option>
となってしまい、原因が全くわかりません。アイディアがある方は教えてください。

なおChrome55を使用しています。よろしくお願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

innerHTMLを直接書く場合、完全なHTMLをセットする必要があります。閉じタグなしの<select>だけのようなものをセットすると、その時点で</select>が補われてしまいます。

ということで、innerHTMLでHTMLを組み立てたい場合、変数で一気に書き換えるほうがいいです。

javascript
1var html = '<select name="condition">'; 
2html += '<option value="0">a</option>';
3html += '</select>';
4var ele = document.createElement("span");
5ele.innerHTML = html;
6console.log(ele.innerHTML);

投稿2016/12/27 07:55

maisumakun

総合スコア145183

趣旨とは少しずれますが、こんな書き方もできます。
createElement関数を利用すれば、閉じタグを意識しなくてもOKです。

JavaScript
1var ele = document.createElement('span');
2var select = document.createElement('select');
3var option = document.createElement('option');
4select.setAttribute('name', 'condition');
5option.value = 0;
6option.innerHTML = 'a';
7select.appendChild(option);
8ele.appendChild(select);
9console.log(ele.innerHTML);