jQuery入門 | 要素の操作 | 要素の置換 .replaceAll() .replaceWith()

要素の置換

次のメソッドを使用すると、選択した要素やコンテンツを指定された要素やコンテンツに置き換えられる。

メソッド	説明
.replaceAll()	選択した要素を指定された要素に置き換える。
.replaceWith()	選択したすべての要素を指定された要素に置き換える。

`.replaceAll()`メソッド

.replaceAll()メソッドは、選択した要素を指定された要素に置き換える。このメソッドは、引数としてセレクター、jQueryオブジェクト、HTML DOM要素、配列などを受け取ることができる。

$(source).replaceWith(target);

次のようなHTML要素があるとき、

<p>こんにちは。</p>
<p>よろしくお願いします。</p>

要素を作成して、別の要素をその要素に置き換えられる。

$("<div>devkumaです。</div>").replaceAll("p");

または、あるオブジェクトの要素で別の要素を置き換えられる。

$("#two").replaceAll($("#one"));

コードを実行

`.replaceWith()`メソッド

.replaceWith()メソッドは、選択した要素を指定された要素に置き換える。このメソッドは、引数としてHTMLコード形式の文字列、jQueryオブジェクト、HTML DOM要素、配列などを受け取ることができる。また、選択した要素を置き換えられるコンテンツを返す関数を引数として受け取ることもできる。

$(target).replaceWith(source);

.replaceWith()メソッドの動作は.replaceAll()メソッドと似ているが、ソースとターゲットの位置が互いに反対である。また、.replaceWith()メソッドは、指定された要素に置き換えられて削除された既存要素を返す。