JavaScriptでinnerHTMLを使う際のデメリットと注意点を解説

innerHTMLの主なデメリット

JavaScriptでDOM操作を行う際、innerHTMLは手軽に使える便利なプロパティですが、いくつかの重要なデメリットがあります。ここでは、その主な問題点について詳しく解説します。

1. 追加時に全体が再パースされるため処理が遅い

innerHTMLには、既存の内容を保持したまま要素を追加する（アペンドする）仕組みがありません。値を更新すると、ブラウザはHTML文字列全体を解析し直してDOMツリーを再構築します。

そのため、要素を頻繁に追加・変更するような場面では、パフォーマンスが大きく低下します。

例えば、あるdivタグに新しい要素を追加したい場合、次のようなコードになります。

let myDiv = document.querySelector('#myDiv')
// myDivの中身全体が再パースされる
myDiv.innerHTML += '<p>Added new tag</p>'

このように+=で追記しているように見えても、実際には既存の子ノードがすべて破棄され、文字列から新しく作り直されています。要素数が多いページでは、この再構築のコストが無視できなくなります。

2. HTMLの妥当性チェック（バリデーション）が行われない

innerHTMLに代入した文字列は、そのままHTMLとして解析されるだけで、構文チェックやバリデーションは一切行われません。

その結果、タグの閉じ忘れや不正な構造を持つ「壊れたHTML」をそのままドキュメントに挿入してしまい、レイアウト崩れや意図しない動作の原因になることがあります。

補足：セキュリティ面のリスクにも注意

上記の他にも、innerHTMLにはXSS（クロスサイトスクリプティング）のリスクがある点も見逃せません。ユーザー入力などの信頼できない文字列をinnerHTMLに渡すと、悪意のあるスクリプトが実行される可能性があります。

代替手段の活用を検討しよう

これらの問題を避けるためには、以下のような方法が有効です。

• document.createElement() や appendChild() を使って、既存ノードを壊さずに要素を追加する
• 部分的なHTML挿入が必要な場合は、より効率的な insertAdjacentHTML() を利用する
• テキストのみを扱う場合は、安全な textContent を使う

状況に応じて適切なAPIを選択することで、パフォーマンスと安全性の両方を確保できます。