jQuery的replaceWith（）和html（）之間有什麼區別？

Question

當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()替換元素的內容，而replaceWith()代替實際元素。

Answer 2

replaceWith（）將替換當前元素，而html（）只是替換內容。

請注意，replaceWith（）實際上不會刪除元素，只是將其從DOM中刪除並將其返回給您的集合中。

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

Answer 3

老問題，但這可能有助於某人。

如果您的HTML無效，這些功能在Internet Explorer和Chrome/Firefox中的運行方式會有所不同。

清理您的HTML，它們將按照記錄工作。

（不關閉我的</center>我晚上花了我！）

Answer 4

有使用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();將返回 <p>My Content</p>整個DOM對象。

---

2）HTML（ '值'）與replaceWith（ '值'）

$('#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 5

它也可能是有用的知道，.empty().append()也可以用來代替.html()。在下面顯示的基準測試中，速度更快，但前提是您需要多次調用此函數。

請參閱：https://jsperf.com/jquery-html-vs-empty-append-test