innerHTMLでテキストは追加されるのにHTMLタグが反映されない原因と対処法

innerHTMLでテキストは追加されるのにHTMLタグが反映されない原因と対処法

JavaScriptでinnerHTMLを使って要素を追加した際、「テキストは表示されるのにHTMLタグがうまく反映されない」という現象に悩まされていませんか？この問題の多くは、+=（複合代入演算子）でinnerHTMLに直接文字列を連結していることが原因です。

原因：innerHTMLへの += による連結

element.innerHTML += "..." のように書くと、ブラウザは既存の子要素をいったんすべて破棄し、連結後の文字列を改めてパースしてDOMを再構築します。この再構築のタイミングによって、途中段階の不完全なタグがただのテキストとして扱われたり、すでに設定していたイベントハンドラが失われたりすることがあります。

解決策：文字列を完成させてから一度だけ代入する

最もシンプルで確実なのは、HTML全体の文字列を変数に組み立て、最後にinnerHTMLへ一度だけ代入する方法です。

var myNum = [1, 2, 3];
var myStr;

myStr = "<ul>";

for (var a in myNum) {
  myStr += "<li>" + a + "</li>";
}

myStr += "</ul>";

id("numberList").innerHTML = myStr;

この例では、まず開始タグ <ul> を文字列として変数に代入し、ループの中で各項目を <li> タグ付きで連結していきます。すべての項目を追加し終えたら、閉じタグ </ul> を付けて文字列を完成させます。最後に、完成した文字列をまとめてinnerHTMLへ渡すことで、リスト全体が正しいHTMLとして描画されます。

なお、サンプルコードの id("numberList") は指定したIDの要素を取得する独自関数の例です。実際のコードでは document.getElementById("numberList") を使用してください。

より安全・便利な代替手段

パフォーマンスや安全性をさらに高めたい場合は、次の方法も検討する価値があります。

• document.createElement()：DOMノードを直接生成して追加するため、文字列のパースミスが発生しません。
• insertAdjacentHTML()：既存のDOMを破棄せずに、特定の位置へ部分的にHTMLを挿入できます。
• textContent：ユーザー入力など信頼できない文字列を表示する場合は、XSS対策としてHTMLではなくテキストとして挿入します。

innerHTMLへの連結は手軽ですが、「文字列を組み立ててから一度だけ代入する」ことを基本にすれば、タグが反映されないトラブルは確実に回避できます。