外層 HTML と内層 HTML の違いは何ですか？
Web 開発において、HTML 要素を操作することは非常に一般的です。特に、JavaScript を使用して要素の内容を取得または変更する場合、「outerHTML」と「innerHTML」という 2 つのプロパティがよく使われます。これらのプロパティはどちらも要素の HTML マークアップにアクセスすることを可能にしますが、重要な違いがあります。
outerHTML: 要素自身を含む HTML
outerHTML プロパティは、指定した要素自身を含む、その要素とそのすべての子要素の HTML マークアップを表します。つまり、outerHTML を使用すると、要素全体をその内容と共に取得または置き換えることができます。
<div id="container">
<p>これは段落です。</p>
</div>
上記の HTML において、container 要素の outerHTML は次のようになります。
<div id="container">
<p>これは段落です。</p>
</div>
outerHTML を使用して、要素全体を別の要素に置き換えることができます。
document.getElementById("container").outerHTML = "<span>これは新しい要素です。</span>";
innerHTML: 要素の内容のみの HTML
一方、innerHTML プロパティは、指定した要素の子要素の HTML マークアップのみを表します。要素自身は含まれません。つまり、innerHTML を使用すると、要素の内容を取得または置き換えることができますが、要素自体は変更されません。
上記の container 要素の例では、innerHTML は次のようになります。
<p>これは段落です。</p>
innerHTML を使用して、要素の内容を別の HTML に置き換えることができます。
document.getElementById("container").innerHTML = "<h2>これは新しい見出しです。</h2>";
outerHTML と innerHTML の違い
以下の表は、outerHTML と innerHTML の主な違いをまとめたものです。
| 特徴 | outerHTML | innerHTML |
|---|---|---|
| 要素自身を含む | 含む | 含まない |
| 取得・設定できる範囲 | 要素全体 | 要素の内容のみ |
| 用途 | 要素の置換えなど | 要素の内容の更新など |
注意点
outerHTMLを使用して要素を置き換える場合、元の要素に対する参照は無効になります。innerHTMLを使用する場合、クロスサイトスクリプティング（XSS）の脆弱性に注意する必要があります。信頼できないデータを使用する場合は、適切にサニタイズする必要があります。
参考文献
よくある質問
Q1: outerHTML と innerHTML どちらを使うべきですか？
A1: 要素自身を含むかどうかで判断します。要素全体を置き換えたい場合は outerHTML を、要素の内容のみを変更したい場合は innerHTML を使用します。
Q2: innerHTML は安全ですか？
A2: 信頼できないデータを使用する場合、XSS の脆弱性に注意が必要です。適切にサニタイズしてから使用するようにしてください。
Q3: outerHTML と innerHTML 以外の方法で要素を操作できますか？
A3: はい、DOM API を使用して要素を操作することもできます。例えば、createElement、appendChild、removeChild などのメソッドを使用できます。
その他の参考記事:HTML DOM HTML コンテンツを変更する