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

jQueryの要素を置き換えるサンプルです。

目次	要素を置き換える(replaceWith)
	要素を置き換える(replaceAll)

要素を置き換える(replaceWith)

$(置換対象).replaceWith(置換後の要素)

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

要素を置き換えるサンプル

ボタン１またはボタン２を押すと、文字が変わります。

テスト:あいうえお

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

<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/3.4.1/jquery.min.js"></script>
<script>

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

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

</script>

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

要素を置き換える(replaceAll)

$(置換後の要素).replaceAll(置換対象)

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

要素を置き換えるサンプル

ボタン１またはボタン２を押すと、文字が変わります。

テスト:あいうえお

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

<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/3.4.1/jquery.min.js"></script>
<script>

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

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

</script>

9,13行目は、replaceAllメソッドで1行目のspan要素を置換えます。