outerHTML は、要素自身も含めた HTML 文字列を取得・設定するプロパティです。innerHTML が中身だけなのに対し、outerHTML は要素自体も含みます。
innerHTML との違い
<div id="container"> <p id="target" class="message">こんにちは</p> </div>
const target = document.getElementById('target'); // innerHTML は中身だけ console.log(target.innerHTML); // "こんにちは" // outerHTML は要素自身も含む console.log(target.outerHTML); // '<p id="target" class="message">こんにちは</p>'
outerHTML を設定する
outerHTML に値を設定すると、要素自体が置き換わります。
target.outerHTML = '<span>新しいスパン</span>';
この操作の後、元の target 変数は DOM から切り離された状態になります。
const target = document.getElementById('target'); target.outerHTML = '<span id="new">新しい要素</span>'; // target はもう DOM にない console.log(target.parentNode); // null // 新しい要素を取得するには再度検索が必要 const newElement = document.getElementById('new');
実際に動かしてみよう
HTML
CSS
JavaScript
<div id="container"> <p id="target">これは段落です</p> </div> <button id="toSpan">span に変換</button> <button id="toDiv">div に変換</button> <p id="result"></p>
#container { padding: 15px; background: #f5f5f5; margin-bottom: 10px; } #container span { color: blue; } #container div { color: green; font-weight: bold; }
document.getElementById('toSpan').addEventListener('click', () => { const target = document.getElementById('target'); if (target) { target.outerHTML = '<span id="target">これはスパンです</span>'; document.getElementById('result').textContent = '段落をスパンに変換しました'; } }); document.getElementById('toDiv').addEventListener('click', () => { const target = document.getElementById('target'); if (target) { target.outerHTML = '<div id="target">これは div です</div>'; document.getElementById('result').textContent = 'スパンを div に変換しました'; } });
使いどころ
要素のタグを変更したい
p を div に変えたい、などのケースで使える
要素を丸ごと置換したい
属性ごと別の要素に差し替える
注意点
const element = document.getElementById('target'); // outerHTML 設定後、element は無効になる element.outerHTML = '<span>新しい</span>'; // この後 element を使おうとしても期待通り動かない element.textContent = 'テスト'; // DOM に反映されない
innerHTML との比較
innerHTML
要素の中身を操作。要素自体は残る
outerHTML
要素ごと置き換える。元の参照は無効になる
outerHTML は強力ですが、参照が切れることを意識して使いましょう。頻繁に使うものではありませんが、要素をまるごと差し替えたいときに便利です。
