replaceWith()

replaceWith()はセレクターで指定した要素を削除し、新しいコンテンツと差し替えるメソッドです。

例えば次のようなHTMLがあったとします。

<div class="container">
	<div class="inner first">Hello</div>
	<div class="inner second">And</div>
	<div class="inner third">Goodbye</div>
</div>

次のようなスクリプトを実行することで”div.second”の内容を引数で指定したHTMLと差し替えます。

$('div.second').replaceWith('<h2>New heading</h2>');

<div class="container">
	<div class="inner first">Hello</div>
	<h2>New heading</h2>
	<div class="inner third">Goodbye</div>
</div>

セレクターで指定した要素が複数の場合はそれぞれの要素を変更します。

$('div.inner').replaceWith('<h2>New heading</h2>');

<div class="container">
	<h2>New heading</h2>
	<h2>New heading</h2>
	<h2>New heading</h2>
</div>

引数にjQueryオブジェクトやDOMオブジェクトを指定すると、セレクターで指定した要素を削除後その位置に、引数で指定した要素を移動させます。

$('div.third').replaceWith($('.first'));

<div class="container">
	<div class="inner second">And</div>
	<div class="inner first">Hello</div>
</div>

jQuery 1.4よりreplaceWith()はDOM上に存在しない要素に対しても適応できるようになりました。例えば次のスクリプトは空のp要素を返します。

$("<div/>").replaceWith("<p></p>");

また、引数にコールバック関数を指定することができるようになりました。

$('div.container').replaceWith(function() {
	return $(this).contents();
});

このスクリプトではcontents()を利用してセレクターで指定した要素をその子要素と差し替えています。

replaceWith()はjQuery 1.2で追加されたメソッドです

jQuery 1.4より引数に関数オブジェクトを指定できるようになりました

登録日 : 2013年08月31日最終更新日 : 2013年8月31日

jQuery リファレンス