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

01. 要素を置き換える

要素を置き換える(replaceWith)

ボタンA、ボタンBを押すと、文字が変わります。

TEST:Red

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

<p>TEST:<span id="span1">Red</span></p>
<input type="button" id="button11" value="A" />
<input type="button" id="button12" value="B" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    $("#button11").click(function () {
        $("#span1").replaceWith('<span id = "span1">Yellow</span>');
    });
    $("#button12").click(function () {
        $("#span1").replaceWith('<span id = "span1">Blue</span>');
    });
</script>

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

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

replaceWithは、要素を置換えます。
replaceAllとの違いは、置換対象と置換後の要素が逆です。
$()はjQueryオブジェクトです。

要素を置き換える(replaceAll)

ボタンA、ボタンBを押すと、文字が変わります。

TEST:Red

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

<p>TEST:<span id="span2">Red</span></p>
<input type="button" id="button21" value="A" />
<input type="button" id="button22" value="B" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    $("#button21").click(function () {
        $('<span id = "span2">Yellow</span>').replaceAll("#span2");
    });
    $("#button22").click(function () {
        $('<span id = "span2">Blue</span>').replaceAll("#span2");
    });
</script>

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

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

replaceAllは、要素を置換えます。
replaceWithとの違いは、置換対象と置換後の要素が逆です。
$()はjQueryオブジェクトです。