javascript - 两次更改相同的HTML标签

我有以下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

最佳答案

这是因为replaceWith()函数取代了整个h3#loginStatus标记(包括其自身)。因此，在第一行JS行之后，此h3元素不再存在。

您应在此处使用html()设置内部html内容。

例:

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