两次更改相同的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

Answer 1

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

您应该在此处使用html()来设置内部html内容..

示例：

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

http://jsfiddle.net/Rc5Nn/

Answer 2

在您的第一个replaceWith之后，您的h3#loginStatus不再存在。然后它不能再次更换。

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

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

Answer 3

您正在覆盖loginStatus ID，因此您在第一次替换后不能再引用它，因此它保持不变。

您可以使用.html代替仅替换loginStatus标头的内部内容。

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

Answer 4

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

在此之后，elemnt $（“＃loginStatus”）被替换为“xD”，因此没有elemnt $（“＃loginStatus”）替换此函数

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

您可以使用.html而不是replaceWIth

Answer 5

.replaceWith( newContent )

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

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