javascript - 同じ HTML タグを 2 回変更する

Question

私は次のh3を持っています：

<h3 class="loginheading" id="loginStatus">Replace Me</h3>

そしてJavaスクリプト関数：

$("#loginStatus").replaceWith("<img src='x.jpg'> xD");
$("#loginStatus").replaceWith("<img src='y.jpg'> xX");

この機能の後、見出しの値は次のようになります。xD

なぜこれは xX ではないのですか? 最後に xX を取得するにはどうすればよいですか?

フィドルHere

score 3 · Accepted Answer

これは、関数がそれ自体を含むタグreplaceWith()全体を置き換えるためです。h3#loginStatusしたがって、最初の JS 行の後、このh3要素はもう存在しません。

html()内部の html コンテンツを設定するには、ここを使用する必要があります。

例：

$(document).ready(function() {
    $("#loginStatus").html("<img src=''> xD");
    $("#loginStatus").html("<img src=''> xX");
});

score 2 · Accepted Answer

最初のの後replaceWith、あなたh3#loginStatusはもう存在しません。2回目以降の交換はできません。

を保持し、内容を変更するhtml()ことが目標である場合は、代わりに使用できます。h3

$("#loginStatus").html("<img src='x.jpg'> xD");
$("#loginStatus").html("<img src='y.jpg'> xX");

score 1 · Accepted Answer

loginStatus ID を上書きしているため、最初の置換後に参照できなくなります。そのため、同じままです。

代わりに .html を使用して、loginStatus ヘッダーの内部コンテンツのみを置き換えることができます。

$("#loginStatus").html("<img src='x.jpg'> xD");
$("#loginStatus").html("<img src='y.jpg'> xX");

score 1 · Accepted Answer

$("#loginStatus").replaceWith("<img src='x.jpg'> xD");

この後、要素 $("#loginStatus") は " xD" に置き換えられるため、この関数が置き換える要素 $("#loginStatus") はありません

$("#loginStatus").replaceWith("<img src='y.jpg'> xX");

replaceWIth の代わりに .html を使用できます

5 に答える 5