Terms Privacy

© Rollpie

JavaScript
21 Jan 2026

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

5 views