jQuery 要素を置き換えるサンプル(replaceWithとreplaceAll)

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

目次

replaceWithメソッド

  • jQueryのreplaceWithメソッドです。
  • 要素を置換えます。
  • $(置換対象).replaceWith(置き換え後の要素)
  • 以下はjQueryサイトのreplaceWithメソッドのページです。
    http://api.jquery.com/replacewith/

サンプル

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

テスト:あいうえお

コード

上記サンプルのコードです。
12,17行目は、replaceWithメソッドで23行目のspan要素を置換えます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのreplaceWithのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン1を押したとき
	$("#btn1").click(function() {
		// replaceWithメソッドで指定
		$("#test1").replaceWith('<span id = "test1">かきくけこ</span>');
	});
	// ボタン2を押したとき
	$("#btn2").click(function() {
		// replaceWithメソッドで指定
		$("#test1").replaceWith('<span id = "test1">さしすせそ</span>');
	});
});
</script>
</head>
<body >
<p>テスト:<span id = "test1">あいうえお</span></p>
<input type="button" id="btn1" value="ボタン1">
<input type="button" id="btn2" value="ボタン2">
</body>
</html>

replaceAllメソッド

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

サンプル

ボタン1を押すと、テストの横の文字が「かきくけこ」に変わります。
ボタン2を押すと、テストの横の文字が「さしすせそ」に変わります。

テスト:あいうえお

コード

上記サンプルのコードです。
12,17行目は、replaceAllメソッドで23行目のspan要素を置換えます。
replaceWithメソッドと比べるとオブジェクトと引数の位置が逆になっています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのreplaceWithのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	// ボタン1を押したとき
	$("#btn3").click(function() {
		// replaceAllメソッドで指定
		$('<span id = "test2">かきくけこ</span>').replaceAll('#test2');
	});
	// ボタン2を押したとき
	$("#btn4").click(function() {
		// replaceAllメソッドで指定
		$('<span id = "test2">さしすせそ</span>').replaceAll('#test2');
	});
});
</script>
</head>
<body >
<p>テスト:<span id = "test2">あいうえお</span></p>
<input type="button" id="btn3" value="ボタン3">
<input type="button" id="btn4" value="ボタン4">
</body>
</html>

関連の記事

jQuery 要素を追加するサンプル(before、after、prepend、append)
jQuery 要素を移動するサンプル(appendTo、prependTo、insertAfter、insertBefore)
jQuery 要素を削除するサンプル(removeとempty)

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る