jQuery 要素を置き換える(replaceWith/replaceAll)

jQueryの要素を置き換えるサンプルです。
replaceWith、replaceAllメソッドを使用します。

目次

要素を置き換える(replaceWithメソッド)

replaceWithメソッドで要素を置き換えるサンプルです。
ボタン1を押すと、テストの横の文字が「かきくけこ」に変わります。
ボタン2を押すと、テストの横の文字が「さしすせそ」に変わります。

テスト:あいうえお

コード

上記サンプルのコードです。

<p>テスト:<span id = "span1">あいうえお</span></p>
<input type="button" id="button1" value="ボタン1">
<input type="button" id="button2" value="ボタン2">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		$("#span1").replaceWith('<span id = "span1">かきくけこ</span>');
	});

	$("#button2").click(function() {
		$("#span1").replaceWith('<span id = "span1">さしすせそ</span>');
	});
});
</script>

10,14行目は、replaceWithメソッドで1行目のspan要素を置換えます。

replaceWithメソッド

  • jQueryのreplaceWithメソッドです。
  • 要素を置換えます。
  • replaceAllメソッドとの違いは、オブジェクトと引数の位置が逆です。
  • $(置換対象).replaceWith(置き換え後の要素)
  • $()はjQueryオブジェクトです。
  • 以下はjQueryサイトのreplaceWithメソッドのページです。
    http://api.jquery.com/replacewith/

 

要素を置き換える(replaceAllメソッド)

replaceAllメソッドで要素を置き換えるサンプルです。
ボタン1を押すと、テストの横の文字が「かきくけこ」に変わります。
ボタン2を押すと、テストの横の文字が「さしすせそ」に変わります。

テスト:あいうえお

コード

上記サンプルのコードです。

<p>テスト:<span id = "span2">あいうえお</span></p>
<input type="button" id="button3" value="ボタン3">
<input type="button" id="button4" value="ボタン4">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button3").click(function() {
		$('<span id = "span2">かきくけこ</span>').replaceAll('#span2');
	});

	$("#button4").click(function() {
		$('<span id = "span2">さしすせそ</span>').replaceAll('#span2');
	});
});
</script>

10,14行目は、replaceAllメソッドで1行目のspan要素を置換えます。
replaceWithメソッドと比べるとオブジェクトと引数の位置が逆になっています。

replaceAllメソッド

  • jQueryのreplaceAllメソッドです。
  • 要素を置換えます。
  • replaceWithメソッドとの違いは、オブジェクトと引数の位置が逆です。
  • $(置き換え後の要素).replaceAll(置換対象)
  • $()はjQueryオブジェクトです。
  • 以下はjQueryサイトのreplaceAllメソッドのページです。
    http://api.jquery.com/replaceAll/

関連の記事

jQuery 要素を追加する(before/after/prepend/append)
jQuery 要素を移動する(appendTo/prependTo/insertAfter/insertBefore)
jQuery 要素を削除するremoveとemptyの違い

△上に戻る