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

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不再存在。然后就不能第二次更换了。

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

您可以使用 .html 而不是 replaceWIth

score 0 · Accepted Answer

.replaceWith( newContent )

描述：用提供的新内容替换匹配元素集中的每个元素，并返回被移除的元素集。#JQuery

所以 h3 被第一个 java-script 语句替换，所以$("#loginStatus").html("<img src='y.jpg'> xX");不会工作，因为没有 id= "loginStatus" 的元素不存在

5 回答 5