jQuery｢replaceWith / replaceAll｣で指定要素を別の要素に置き換える

2020年4月20日

jQueryのメソッド「.replaceWith() / .replaceAll()」は、指定した要素を「別の要素に置き換える」事ができるメソッド。

今回は、jQueryで「指定した要素を、別の要素に置き換える事ができる」メソッド「.replaceWith() / .replaceAll()」について、その使い方をサンプルを交えて解説しよう。

.replaceWith()と .replaceAll()の違い

.replaceWith()と .replaceAll()は実は基本的に同じ機能。違いは、「セレクタ」と「置き換えるHTML」を記述する順番が違うだけ。

.html()との違い

HTMLを置き換えるメソッドとして、もうひとつ.html()メソッドがある。

.html()は、セレクタで指定した要素の中身（子要素orテキスト）を置き換えるのに対し、.replaceWith()と .replaceAll()は「指定した要素そのもの」を置き換えるという違いがある。

それでは、違いをそれぞれの構文で確認していこう。

.replaceWith()の構文

$("セレクタ").replaceWith("<タグ>テキスト</タグ>");

セレクタで指定した要素を、パラメータで指定した「要素」に置き換える事ができる。

ちなみに、.replaceWith('<div class="test">テスト</div>')のようにあらかじめ「クラスやIDをつける」事も可能だが、シングルコーテーションとダブルコーテーションの関係に注意してほしい。

.replaceAll()の構文

$("<タグ>テキスト</タグ>").replaceAll("セレクタ");

.replaceWith()とは逆に「先に置き換えるHTMLを指定」してから、.replaceAllのパラメータで置き換え元の要素を「セレクタ」で指定する形で、「要素」に置き換える事ができる。

jQueryで.replaceWith()を使って、指定要素を別の要素に置き換える例

jQuery

$(function(){
 $(".box p").replaceAll("<div>置換え完了</div>");
});

HTML （jQuery反映前）

<div class="box">
 <p>元の要素</p>
 <p>元の要素</p>
 <p>元の要素</p>
</div>

HTML （jQuery反映後）

<div class="box">
 <div>置換え完了</div>
 <div>置換え完了</div>
 <div>置換え完了</div>
</div>

このように書く事で$(".box p")と指定された複数のPを<div>置換え完了</div>に置き換える事ができる。

.replaceWith()、.replaceAll()のパラメータは「jQueryオブジェクトや式」を入れる事もできる

先程の例と違い、$("p")としてp要素全てに適用させて、さらにpとpの間には<div>など別の要素が存在する場合はどうなるのか、確認しておこう。

jQuery

$(function(){
 $(".box p").replaceWith()("<div>" + $(this).text() + "</div>");
});

HTML （jQuery反映前）

<div class="box">
 <p>元のテキスト</p>
 <p>元のテキスト</p>
 <p>元のテキスト</p>
</div>

HTML （jQuery反映後）

<div class="box">
 <div>元のテキスト</div>
 <div>元のテキスト</div>
 <div>元のテキスト</div>
</div>

この場合$(".box p")を"<div>" + $(this).text() + "</div>"に置き換えるのだが、$(this)は$(".box p")の事を指し、$(".box p").text()と同じ意味であり、その結果<div>元のテキスト</div>に差し替える事ができるのだ。

以上、jQueryで「.replaceWith()を使って、指定要素を別の要素に置き換える」方法でした。

その他のjQueryメソッドについて確認したい方は、jQueryメソッドを一覧で解説したこちらの記事を確認しておこう！

▶ jQueryの「メソッド一覧」と使い方

jQueryの沢山あるメソッドの一覧を解説してほしいjQueryのメソッド一覧を確認して、jQueryを自由に操れるよ…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント