Sự khác biệt giữa replaceWith() và html() của jQuery là gì?

Question

Sự khác nhau giữa các hàm replaceWith() và html() của jQuery khi HTML được truyền vào làm tham số là gì?

Answer 1

Hãy mã HTML này:

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

Làm:

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

sẽ dẫn đến:

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

Làm:

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

sẽ dẫn đến:

Aloha World 

Vì vậy html() thay thế các nội dung của phần tử, trong khi replaceWith() thay thế các yếu tố thực tế.

Answer 2

replaceWith() sẽ thay thế phần tử hiện tại, trong khi html() chỉ cần thay thế nội dung.

Lưu ý rằng hàm replaceWith() sẽ không thực sự xóa phần tử mà chỉ xóa nó khỏi DOM và trả lại cho bạn trong bộ sưu tập.

Một ví dụ cho Peter: http://jsbin.com/ofirip/2

Answer 3

Câu hỏi cũ nhưng điều này có thể giúp ai đó.

Có một số khác biệt về cách các chức năng này hoạt động trong Internet Explorer và Chrome/Firefox NẾU HTML của bạn không hợp lệ.

Dọn dẹp HTML của bạn và chúng sẽ hoạt động như tài liệu.

(Không đóng </center> tôi chi phí cho tôi buổi tối của tôi!)

Answer 4

Có hai cách sử dụng html() và chức năng replaceWith() Jquery.

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

1.) html() vs replaceWith()

var html = $('#test_id p').html(); sẽ trở lại "Nội dung của tôi"

Nhưng var replaceWith = $('#test_id p').replaceWith(); sẽ trả lại toàn bộ đối tượng DOM của <p>My Content</p>.

---

2.) html ('giá trị') vs replaceWith ('giá trị')

$('#test_id p').html('<h1>H1 content</h1>'); sẽ cung cấp cho bạn đặt sau ra.

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

Nhưng $('#test_id p').replaceWith('<h1>H1 content</h1>'); sẽ cung cấp cho bạn những điều sau đây.

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

Answer 5

Nó cũng có thể hữu ích để biết rằng .empty().append() cũng có thể được sử dụng thay cho .html(). Trong điểm chuẩn hiển thị dưới đây là nhanh hơn nhưng chỉ khi bạn cần gọi hàm này nhiều lần.

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