outerHTML で要素ごと置き換える
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 は強力ですが、参照が切れることを意識して使いましょう。頻繁に使うものではありませんが、要素をまるごと差し替えたいときに便利です。
9views
