067. outerHTML（outerHTML：自分自身を丸ごと「脱ぎ捨てる」）

原理：要素そのものを入れ替える

「箱」ごと新しいものに取り替える

前回の innerHTML が「箱（外枠）の中身だけを入れ替える」ものだったのに対し、今回の outerHTML（アウター・エイチティーエムエル）は、「箱（自分自身）をまるごと消去して、サーバーから届いた新しいHTMLに置き換える」という、より大胆な更新方法です。

これは、自分の役目が終わったときや、自分を全く別の見た目に変身させたいときに非常に強力な力を発揮します。

実践：劇的な変化を演出する

1. 「編集」ボタンから「保存」ボタンへの変身

ボタンを押した瞬間に、そのボタン自体が入力フォームや別のボタンに置き換わる例です。

<!-- 
  hx-target: this (自分自身をターゲットにする)
  hx-swap: outerHTML (自分を消して、サーバーからの返信と入れ替わる)
-->
<button hx-get="/api/edit-form" hx-target="this" hx-swap="outerHTML">
    プロフィールを編集する
</button>

<!-- (サーバーが返すHTMLのイメージ) -->
<form hx-put="/api/profile">
    <input type="text" name="username" value="山田太郎">
    <button type="submit">保存</button>
</form>

この場合、元の「編集する」ボタンは跡形もなく消え、そこに「フォーム」が完全に入れ替わりで出現します。

2. リスト項目の更新

ToDoリストの一行を更新するときなど、その行（<tr> や <li>）をまるごとサーバーで生成し直して、古いものとガッチャンコと入れ替える際によく使われます。

<tr id="task-1">
    <td>部屋の掃除</td>
    <td>
        <button hx-post="/task/1/complete" 
                hx-target="#task-1" 
                hx-swap="outerHTML">
            完了
        </button>
    </td>
</tr>

3. ステップ・バイ・ステップ解説

ターゲットの決定: hx-target="this" を使うことが非常に多いです。
swapの指定: hx-swap="outerHTML" と明記します。
サーバーの応答: ここが重要です！サーバーは、入れ替わった後の「外枠も含めた完全なHTML」を返さなければなりません。

比較：innerHTML vs outerHTML（使い分けの急所）

innerHTML（内側）

動作: <div> 中身だけ </div>
利点: div のIDやスタイルが残る。
注意: サーバーは 中身 だけを返せば良い。

outerHTML（自分ごと）

動作: <div> 自分ごと消える </div> → <span> 新しい自分 </span>
利点: タグの種類（divからformへ等）を変えられる。
注意: サーバーは <span> 新しい自分 </span> のようにタグも含めて返さなければならない。

まとめ：初心者のための「変身」の極意

outerHTML は、あなたのWebサイトのパーツに「進化」や「交代」のドラマを与えます。

「this」との最強コンビ: 自分を消して何かを出すときは、hx-target="this" と hx-swap="outerHTML" をセットで覚えるのが一番の近道です。
IDの行方に注意: 自分を消すと、自分に付いていたIDも消えます。もし新しい要素に同じ役割を引き継がせたいなら、サーバーが返すHTMLにも同じIDを付けておく必要があります。
スマートなUI: ポチッと押すとその場所が別の機能に切り替わる。そんなモダンな体験を作るには欠かせない技術です。

自分を脱ぎ捨てて、新しい自分へ。outerHTML を使って、静的なページではあり得なかった、ダイナミックで驚きのある画面更新を実現してください。次の記事からは、自分を消さずに「となり」に要素を足していく挿入技シリーズ、まずは「beforebegin」（068. beforebegin）をご紹介します。