【jQuery】要素を別の要素に置き換える完全ガイド｜replaceWith・replaceAll・テキスト←→入力欄の切り替えまで

jQueryの replaceWith() を使うと、ある要素を別の要素に置き換えられます。クリックしたラベルを入力欄に変えるインライン編集や、Ajaxで取得したコンテンツとの差し替えなどに活用できます。この記事ではreplaceWith・replaceAllの使い分け・インライン編集・条件付き置換・アニメーション付き置換まで解説します。

replaceWith() の基本的な使い方

$(function () {
  // HTML文字列で置き換え
  $('#old-element').replaceWith('<p>新しい要素</p>');

  // jQueryオブジェクトで置き換え
  var $newBtn = $('<button>').text('新ボタン').addClass('btn-primary');
  $('#old-btn').replaceWith($newBtn);

  // 関数で置き換え（現在の要素を参照できる）
  $('span.editable').replaceWith(function () {
    return '<strong>' + $(this).text() + '</strong>';
  });
});

replaceWith と replaceAll の違い

// replaceWith: 対象要素を引数で指定したものに置き換える
$('#target').replaceWith('<div>新しい要素</div>');
// → $(置き換えられる要素).replaceWith(置き換え後の要素)

// replaceAll: 引数で指定した要素を自分自身に置き換える（順番が逆）
$('<div>新しい要素</div>').replaceAll('#target');
// → $(置き換え後の要素).replaceAll(置き換えられる要素)

// どちらも同じ結果になる。replaceWith の方が直感的で多く使われる。

インライン編集（テキスト↔入力欄の切り替え）

<ul id="editable-list">
  <li><span class="editable-text">タスク1</span> <button class="edit-btn">編集</button></li>
  <li><span class="editable-text">タスク2</span> <button class="edit-btn">編集</button></li>
</ul>

$(function () {
  // 「編集」ボタンクリック → テキストを入力欄に置き換え
  $(document).on('click', '.edit-btn', function () {
    var $span = $(this).siblings('.editable-text');
    var text  = $span.text();

    var $input = $('<input type="text">')
      .val(text)
      .addClass('editable-input');

    $span.replaceWith($input);
    $input.focus().select();
    $(this).text('保存').removeClass('edit-btn').addClass('save-btn');
  });

  // 「保存」ボタンクリック → 入力欄をテキストに置き換え
  $(document).on('click', '.save-btn', function () {
    var $input = $(this).siblings('.editable-input');
    var newText = $input.val().trim() || '（空）';

    $input.replaceWith($('<span>').text(newText).addClass('editable-text'));
    $(this).text('編集').removeClass('save-btn').addClass('edit-btn');
  });

  // Enterキーでも保存
  $(document).on('keydown', '.editable-input', function (e) {
    if (e.key === 'Enter') $(this).siblings('.save-btn').click();
    if (e.key === 'Escape') $(this).siblings('.save-btn').click(); // 変更を保存してキャンセル
  });
});

Ajax後にコンテンツを差し替える

$(function () {
  $('#refresh-btn').on('click', function () {
    var $placeholder = $('<div>').text('読み込み中...').addClass('loading');
    $('#content-area').replaceWith($placeholder);

    $.get('/api/content')
      .done(function (html) {
        // 新しいコンテンツと置き換え
        $placeholder.replaceWith($(html).attr('id', 'content-area'));
      })
      .fail(function () {
        $placeholder.replaceWith($('<div id="content-area">').text('取得に失敗しました'));
      });
  });
});

アニメーション付きで置き換える

$(function () {
  $('#swap-btn').on('click', function () {
    var $target = $('#animated-content');
    var $new    = $('<div id="animated-content">').text('新しいコンテンツ').hide();

    // フェードアウトして置き換え、新しい要素をフェードイン
    $target.fadeOut(300, function () {
      $(this).replaceWith($new);
      $new.fadeIn(300);
    });
  });
});

まとめ

jQueryで要素を置き換える際のポイントをまとめます。

• replaceWith(): 対象を新しい要素に置き換える（返り値は元の要素）
• replaceAll(): 書き方が逆（対象と引数が逆転）
• インライン編集: span→input→spanのサイクル、focus().select() で使いやすく
• Ajax差し替え: ローディング要素で一時置換 → 完了後に最終コンテンツへ

関連記事: 要素を削除する完全ガイド / 要素内のテキストを設定・取得するtext()の基本

よくある質問（FAQ）