jQuery的replaceWith（）和html（）之间有什么区别？

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

Answer 1

拿这个HTML代码：

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

这样做：

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

将导致：

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

这样做：

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

将导致：

 Aloha World 

所以html（）replace了元素的内容，而replaceWith（）replace了实际的元素。

Answer 2

replaceWith（）将replace当前元素，而html（）只是replace内容。

请注意，replaceWith（）实际上不会删除元素，只是将其从DOM中删除并将其返回给您的集合中。

Peter的一个例子： http : //jsbin.com/ofirip/2

Answer 3

有两种使用html（）和replaceWith（）的Jquery函数的方法。

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

1.）html（）vs replaceWith（）

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

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

---

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> 

Answer 4

老问题，但这可能有助于某人。

如果您的HTML无效，在Internet Explorer和Chrome / Firefox中如何使用这些function会有一些差异。

清理你的HTML，他们将按照logging工作。

（不closures我的</center>花费我的晚上！）

Answer 5

知道.empty().append()也可以用来代替.html() 。 在下面显示的基准testing中，速度更快，但只有在需要多次调用此函数的情况下。

请参阅： https ： //jsperf.com/jquery-html-vs-empty-append-test