要素そのものを書き換える方法。

Question

前提・実現したいこと

下記のように書き換えたいのですが、removeとかしなければならないのでしょうか？
「取り除いて、追加して」という処理ではなく、そのものを変更する方法はありませんか？

・書き換え前。

<div id="test1">
    <div id="test2">テスト2</div>
    <div id="test3">テスト3</div>
</div>

・書き換え後。

<div id="test1">
    <div id="test4">テスト4</div>  <!-- ←ここだけ交換 -->
    <div id="test3">テスト3</div>
</div>

試したこと

$(function() {
	$('#test1>#test2').html('<div id ="test4">テスト4<</div>');
});

こうすると、中のものが書き換わってしまいます。

・実行結果。

<div id="test1">
  <div id="test2"><div id="test4">テスト4<</div></div>
  <div id="test3">テスト3</div>
</div>

続いて、

$(function() {
	$('#test1').html('<div id ="test4">テスト4</div>');
});

こうすると、丸ごと書き換わってしまいます。

・実行結果。

<div id="test1">
  <div id="test4">テスト4<</div>
</div>

追記

すみません、最初の質問内容で書き換えるテキストが「テスト4」だったり、「書き換え」だったりして、統一してなかったので、
編集しなおしました。

Comments

[m.ts10806]

回答はしたものの、大目的部分が分からないので的確な回答になっているか分かりません。実際は何をどうしたいのでしょうか。

Answer 1

$('#test2').text('テスト4').attr('id','test4');

これでいい様な気がするのですが・・・

Comments

[SakuBlade]

変えるテキストは「テスト4」では無く「書き換え」ですね

[m.ts10806]

最初の「書き換え後」が「テスト4」なので間違ってないと思います。

[tkshp]

ご回答ありがとうございます。
メソッドチェーンの書き方が勉強になりました。
ありがとうございました。

Answer 2

$(function() {
    $('#test2').attr('id','test4');
    $('#test2').html('書き換え');
});

※ちなみにidは画面内1つがルールなので"#test1>#test2"のように指定するのはほとんど意味がありません。

あとは、
例えば、#test1の子要素を配列で取得し、指定した行番号のときだけ任意の要素を入れて、そこの要素を削除するとか。

const change_index = 0;
const change_elem = $('<div></div>',{'id':'test4',text:'テスト4'});
$(function() {
    $('#test1').children('div').each(function(index, element){
        if(index == change_index){
            $('#test1').prepend(change_elem);
            $(this).remove();
        }
    })
});

Comments

[tkshp]

ご回答ありがとうございます。
質問の意図としては、removeとか以外の方法で、htmlメソッドを使って、要素そのものを書き換えることが可能かどうかを知りたかったです。
htmlメソッドだけで変える方法はないということがわかりました。
ありがとうございました。
また、
$('<div></div>',{'id':'test4',text:'テスト4'});
というハッシュでの書き方が勉強になりました。

[m.ts10806]

解決されたようで何よりです。
HTMLは指定要素の中に書き込むだけなので、それだけでは難しいです。
中の要素を取り出してどうにかするか、直接中の要素を書き換えるしかありません。

[tkshp]

ご回答ありがとうございます。
勉強になりました。
ありがとうございます。

[tkshp]

すみません、意図したいことに、より近い回答をいただきましたので、ベストアンサーを移させていただきます。

Answer 3

すでに終わっているものの、直感的にはこちらをしたかったのではないかと思うので残しておきます。

$('#test2').replaceWith('<div id="test4">テスト4</div>');

https://api.jquery.com/replaceWith/

Comments

[tkshp]

ご回答ありがとうございます。
replaceWithメソッドというものがあるのですね、試して確認しました。
意図したかったことです。
ありがとうございました。