logo标签列表

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

jqueryreplacewith
158
什么是jQuery的replaceWith()和html()函数在将HTML作为参数传递时的区别？
jQuery的replaceWith()函数会用提供的内容替换匹配元素，而html()函数则用提供的内容替换匹配元素的内容。
2
这真的帮了我！我正在尝试使用jQuery动态更改标签的文本，而这个线程绝对帮了我。谢谢！ - HereToLearn_
5个回答
311

请看这段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() 函数替换元素本身。

1
很好的解释！ - Luis Gouveia
38

replaceWith() 方法会替换当前元素，而 html() 方法只会替换元素内容。

请注意，replaceWith() 方法并不会实际删除该元素，而是从 DOM 中移除它并将其作为一个集合返回给您。

Peter 的示例：http://jsbin.com/ofirip/2

4
非常有用地将replaceWith()函数不会删除元素写下来，这让我明白了！ - Peter
2
没错，它仍然存在。它不在DOM中，所以您看不到它，但它仍然是有效的HTML代码片段。证明：http://jsbin.com/ofirip/2 - cgp
1
是的，这是真的。感谢您提供示例。我一直在考虑从DOM中删除它（加上垃圾回收），因为从我的角度来看，这本质上是删除。但你在技术上是正确的。我会删除“-1”，希望这对大家有所帮助。 :) - Peter
1
谢谢提醒，replaceWith() 返回旧元素让我调试起来有些沮丧 :( - dain
4
是的，我已经在努力解决这个问题至少半个小时了。我刚刚意识到该函数返回的是替换后的元素，而我本以为它会像下面这样返回新元素：var $form = $target.closest('tr').replaceWith(html)结果发现 $form 包含的是替换前的元素。叹气 - Pawel Krakowiak
显示剩余3条评论
8
使用html()和replaceWith() Jquery函数有两种方式。
<div id="test_id">
   <p>My Content</p>
</div>

1.) html() vs replaceWith()

var html = $('#test_id p').html();将返回"My Content"

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

2.) html('value') vs 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>
2

虽然这个问题比较老，但是这个答案可能会对某些人有所帮助。

如果你的HTML不合法，在Internet Explorer和Chrome / Firefox中这些函数的操作方式会有所不同。

清理你的HTML，它们将按照文档中描述的方式工作。

(我没有关闭我的</center>标签，导致我浪费了整个晚上！)

6
因此，您不应再使用居中对齐了。 :p - Romain Tribes
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接