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？

fiddle 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/