【JavaScript】要素を置換する方法｜replaceWith・replaceChild・replaceChildren・outerHTML・条件分岐パターンまで解説

targetElement.replaceWith(newContent1, newContent2, ...);
// newContent: Node または文字列（複数指定可）

<div id="container">
  <p id="oldMessage">読み込み中...</p>
</div>

const oldMsg = document.getElementById("oldMessage");

// 新しい要素を作成
const newMsg = document.createElement("p");
newMsg.textContent = "データを取得しました";
newMsg.className = "success-message";

// oldMsg を newMsg に置換
oldMsg.replaceWith(newMsg);

// 結果: <div id="container"><p class="success-message">データを取得しました</p></div>

const badge = document.getElementById("status-badge");

// 要素をテキストに置換
badge.replaceWith("完了しました");

// HTML タグを渡しても文字列としてそのまま表示される
// badge.replaceWith("<strong>完了</strong>");
// → 画面に「<strong>完了</strong>」とタグが文字として表示される

const placeholder = document.getElementById("placeholder");

const icon = document.createElement("span");
icon.textContent = "✓ ";
icon.className = "icon-check";

const text = document.createElement("span");
text.textContent = "送信完了";

// 1つの要素を2つの要素に置換
placeholder.replaceWith(icon, text);

const removedNode = parentNode.replaceChild(newChild, oldChild);
// newChild: 置換後のノード
// oldChild: 置換対象の子ノード
// 戻り値: 取り除かれたノード（oldChild）

const parent = document.getElementById("container");
const oldChild = document.getElementById("oldElement");

// 新しい要素を作成
const newChild = document.createElement("div");
newChild.textContent = "置換後の要素";
newChild.className = "new-element";

// 親要素経由で置換
const removed = parent.replaceChild(newChild, oldChild);

// 取り除かれた要素はまだメモリに残っている
console.log(removed.textContent); // oldChild の内容にアクセス可能

const list = document.getElementById("myList");

// すべての子要素を削除
list.replaceChildren();

// 新しい子要素で一括置換
const items = ["りんご", "みかん", "ぶどう"];
const newChildren = items.map(item => {
  const li = document.createElement("li");
  li.textContent = item;
  return li;
});

// 既存の子要素をすべて削除し、新しい要素で置き換え
list.replaceChildren(...newChildren);

const el = document.getElementById("target");

// 要素ごと新しい HTML に置換
el.outerHTML = '<div class="updated">更新済みコンテンツ</div>';

// 注意: 代入後、変数 el は DOM から切り離された旧要素を参照したまま
console.log(el.textContent); // 旧要素の内容がまだ取れる
// 新しい要素を取得するには再度 querySelector 等が必要
const newEl = document.querySelector(".updated");

const container = document.getElementById("container");

// 子要素をすべて新しい HTML に置換
container.innerHTML = '<h2>タイトル</h2><p>新しいコンテンツです</p>';

<div id="result">
  <p id="loading">データを読み込み中...</p>
</div>

async function fetchAndRender() {
  const loading = document.getElementById("loading");

  try {
    const res = await fetch("/api/users");
    const users = await res.json();

    // ユーザーリストを作成
    const ul = document.createElement("ul");
    users.forEach(user => {
      const li = document.createElement("li");
      li.textContent = user.name;
      ul.appendChild(li);
    });

    // ローディング表示をリストに置換
    loading.replaceWith(ul);

  } catch (error) {
    // エラー時はエラーメッセージに置換
    const errMsg = document.createElement("p");
    errMsg.textContent = "データの取得に失敗しました";
    errMsg.className = "error-message";
    loading.replaceWith(errMsg);
  }
}

fetchAndRender();

const form = document.getElementById("myForm");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const msgArea = document.getElementById("message-area");
  const email = form.querySelector("[name=email]").value;

  if (!email.includes("@")) {
    // エラーメッセージに置換
    msgArea.innerHTML = '<p class="error">有効なメールアドレスを入力してください</p>';
    return;
  }

  // 成功メッセージに置換
  msgArea.innerHTML = '<p class="success">送信しました</p>';
});

<div class="tabs">
  <button class="tab-btn active" data-tab="overview">概要</button>
  <button class="tab-btn" data-tab="specs">仕様</button>
  <button class="tab-btn" data-tab="reviews">レビュー</button>
</div>
<div id="tab-content">ここにコンテンツが表示されます</div>

const tabContent = {
  overview: "<h3>商品概要</h3><p>高品質な製品です。</p>",
  specs:    "<h3>仕様</h3><table><tr><td>サイズ</td><td>100×50mm</td></tr></table>",
  reviews:  "<h3>レビュー</h3><p>★★★★☆ とても満足です。</p>"
};

document.querySelectorAll(".tab-btn").forEach(btn => {
  btn.addEventListener("click", () => {
    // アクティブタブの切り替え
    document.querySelector(".tab-btn.active").classList.remove("active");
    btn.classList.add("active");

    // コンテンツを置換
    const key = btn.getAttribute("data-tab");
    document.getElementById("tab-content").innerHTML = tabContent[key];
  });
});

function swapElements(el1, el2) {
  // el2 の位置に一時的なマーカーを置く
  const marker = document.createElement("span");
  el2.replaceWith(marker);

  // el1 の位置に el2 を置く
  el1.replaceWith(el2);

  // マーカーの位置に el1 を置く
  marker.replaceWith(el1);
}

// 使用例: 2つのカードの位置を入れ替え
const card1 = document.getElementById("card1");
const card2 = document.getElementById("card2");
swapElements(card1, card2);