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");

$（“#loginStatus”）。替换为（“xD”）；
$（“#loginStatus”）。替换为（“xX”）；

此函数之后，标题的值为：

xD

为什么这不是xX？我怎样才能在最后拿到xX

---

Fiddle

在第一次用

替换
后，您的
h3#loginStatus
不再存在。那么它就不能再被替换了

如果您的目标是保留
h3
，并更改内容，则可以使用
html（）
：

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

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

$（“#loginStatus”）.html（“xD”）；
$（“#loginStatus”）.html（“xX”）；
您正在覆盖loginStatus ID，因此在第一次替换后无法再引用它，因此它保持不变

您可以改为使用.html来仅替换loginStatus标头的内部内容

$（“#loginStatus”）.html（“xD”）；
$（“#loginStatus”）.html（“xX”）；
$（“登录状态”）。替换为（“xD”）；

在此之后，elemnt$（“#loginStatus”）将替换为“xD”，因此此函数没有可替换的elemnt$（“#loginStatus”）

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

$（“#loginStatus”）。替换为（“xX”）；

您可以使用.html代替replaceWIth
这是因为
replaceWIth（）
函数替换了整个
h3\loginStatus
标记，包括其本身。所以在第一行JS之后，这个
h3
元素就不存在了

您应该在此处使用
html（）
来设置内部html内容

例如：

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

$（文档）.ready（函数（）{
$（“#loginStatus”）.html（“xD”）；
$（“#loginStatus”）.html（“xX”）；
});


说明：用提供的新内容替换匹配元素集中的每个元素，并返回已删除的元素集#JQuery

因此h3被替换为第一个java脚本语句，即So
$（“#loginStatus”）.html（“xX”）将不起作用，因为id=“loginStatus”的元素不存在
在第一次替换后，loginStatus不再存在。。您到底想用这两个replaceWith操作做什么？使用jquery toggle（）函数并在其中传递图像值
$(document).ready(function() {
    $("#loginStatus").html("<img src=''> xD");
    $("#loginStatus").html("<img src=''> xX");
});

.replaceWith( newContent )