jQuery 的 replaceWith() 和 html() 有什么区别？答案

【问题标题】：What's the difference between jQuery's replaceWith() and html()?jQuery 的 replaceWith() 和 html() 有什么区别？
【发布时间】：2016-02-25 20:30:37
【问题描述】：

当 HTML 作为参数传入时，jQuery 的 replaceWith() 和 html() 函数有什么区别？

【问题讨论】：

这对我有帮助！我试图使用 jquery 动态更改标签的文本，这个线程肯定对我有帮助。谢谢！

标签： jquery

【解决方案1】：

知道.empty().append() 也可以用来代替.html() 也可能很有用。在下面显示的基准测试中，这更快，但前提是您需要多次调用此函数。

见：https://jsperf.com/jquery-html-vs-empty-append-test

【讨论】：

【解决方案2】：

有两种方式使用 html() 和 replaceWith() Jquery 函数。

<div id="test_id">
   <p>My Content</p>
</div>

1.) html() 与 replaceWith()

var html = $('#test_id p').html(); 将返回“我的内容”

但是 var replaceWith = $('#test_id p').replaceWith(); 将返回整个 DOM 对象 <p>My Content</p>.

2.) html('value') 与 replaceWith('value')

$('#test_id p').html('<h1>H1 content</h1>'); 会给你以下输出。

<div id="test_id">
  <p><h1>H1 content</h1></p>
</div>

但是 $('#test_id p').replaceWith('<h1>H1 content</h1>'); 会给你以下输出。

<div id="test_id">
      <h1>H1 content</h1>
</div>

【讨论】：

【解决方案3】：

replaceWith() 将替换当前元素，而 html() 只是替换内容。

请注意，replaceWith() 不会真正删除元素，而只是将其从 DOM 中删除并在集合中返回给您。

彼得的例子：http://jsbin.com/ofirip/2

【讨论】：

+1 写下来非常有用，replaceWith() 实际上并没有删除元素。我没想到这一点！
确实如此，它仍然存在。它不在 DOM 中，因此您不会看到它，但它仍然是一段有效的 HTML。证明：jsbin.com/ofirip/2
是的，这是真的。感谢您提出示例。从我的角度来看，我正在考虑将其从 DOM（加上垃圾收集）中删除，这实际上是删除。但你在技术上是正确的。我将删除-1，希望这对所有人都有帮助。 :)
感谢您的注意，replaceWith() 返回旧元素只是给了我一些调试挫折:(
是的，我已经为此奋斗了至少半个小时，我才意识到该函数返回被替换的元素，我期待它返回新的元素，代码如下：@ 987654324@ 原来$form 包含替换前的元素。叹息

【解决方案4】：

老问题，但这可能对某人有所帮助。

如果您的 HTML 无效，这些函数在 Internet Explorer 和 Chrome / Firefox 中的运行方式会有所不同。

清理您的 HTML，它们将按文档说明工作。

（不关闭我的</center> 花了我一个晚上！）

【讨论】：

这就是为什么你不应该再使用中心了。 :p

【解决方案5】：

获取此 HTML 代码：

<div id="mydiv">Hello World</div>

在做：

$('#mydiv').html('Aloha World');

将导致：

<div id="mydiv">Aloha World</div>

在做：

$('#mydiv').replaceWith('Aloha World');

将导致：

Aloha World

所以html() 替换了元素的内容，而replaceWith() 替换了实际元素。

【讨论】：

很好的解释！