Apa perbedaan antara replaceQuith () dan html () jQuery?

145

Apa perbedaan antara fungsi replaceWith () dan html () jQuery ketika HTML dimasukkan sebagai parameter?

jquery DMCS
sumber
2
ini membantu saya! Saya mencoba mengubah teks label secara dinamis menggunakan jquery dan utas ini pasti membantu saya. Terima kasih!
HereToLearn_

Jawaban:

289

Ambil kode HTML ini:

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

Perbuatan:

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

Akan menghasilkan:

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

Perbuatan:

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

Akan menghasilkan:

Aloha World

Jadi html () menggantikan konten elemen, sedangkan replaceWith () menggantikan elemen aktual.

Paolo Bergantino
sumber
1
Penjelasan yang bagus!
Luis Gouveia
31

replaceWith () akan mengganti elemen saat ini, sedangkan html () hanya mengganti konten.

Perhatikan bahwa replaceWith () tidak akan benar-benar menghapus elemen tetapi cukup menghapusnya dari DOM dan mengembalikannya kepada Anda dalam koleksi.

Contoh untuk Peter: http://jsbin.com/ofirip/2

cgp
sumber
3
+1 sangat berguna untuk menuliskannya agar replaceWith () tidak benar-benar menghapus elemen. Saya belum menemukan jawabannya!
Peter
2
Memang benar, masih ada. Itu tidak ada di DOM, jadi Anda tidak akan melihatnya, tetapi masih berupa HTML yang valid. Bukti: jsbin.com/ofirip/2
cgp
1
ya ini benar. terima kasih telah memberikan contoh. Saya berpikir untuk menghapusnya dari DOM (ditambah pengumpulan sampah) sebagai penghapusan pada dasarnya dari sudut pandang saya. Tapi secara teknis Anda benar. Saya akan menghapus -1dan mudah-mudahan ini akan bermanfaat untuk semua. :)
Peter
1
Terima kasih atas catatannya, replaceWith () mengembalikan elemen lama hanya memberi saya beberapa frustrasi debugging :(
dain
2
Ya, saya sudah berjuang ini selama setidaknya setengah jam sekarang, saya baru menyadari bahwa fungsi mengembalikan elemen yang diganti, saya mengharapkannya untuk mengembalikan yang baru dengan kode seperti ini: var $form = $target.closest('tr').replaceWith(html) Ternyata $formberisi elemen sebelum penggantian. sigh
Pawel Krakowiak
5

Ada dua cara menggunakan fungsi html () dan replaceWith (). 

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

1.) html () vs replaceWith ()

var html = $('#test_id p').html(); akan mengembalikan "Konten Saya"

Tetapi var replaceWith = $('#test_id p').replaceWith();akan mengembalikan seluruh objek DOM <p>My Content</p>.

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

$('#test_id p').html('<h1>H1 content</h1>'); akan memberi Anda put out berikut.

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

Tapi $('#test_id p').replaceWith('<h1>H1 content</h1>');akan memberi Anda put berikut.

<div id="test_id">
      <h1>H1 content</h1>
</div>
Harsha
sumber
2

Pertanyaan lama tapi ini bisa membantu seseorang.

Ada beberapa perbedaan dalam cara fungsi-fungsi ini beroperasi di Internet Explorer dan Chrome / Firefox JIKA HTML Anda tidak valid.

Bersihkan HTML Anda dan itu akan berfungsi seperti yang didokumentasikan.

(Tidak menutup </center>biaya saya malam saya!)

Benjamin Wootton
sumber
6
Itu sebabnya Anda tidak harus menggunakan pusat lagi. : p
Romain Tribes
2

Mungkin juga berguna untuk mengetahui bahwa itu .empty().append()juga bisa digunakan .html(). Dalam patokan yang ditunjukkan di bawah ini lebih cepat tetapi hanya jika Anda perlu memanggil fungsi ini berkali-kali.

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

mistajolly
sumber