JQuery'nin replaceWith () ve html () arasındaki fark nedir?

Parametre olarak HTML aktarılırken jQuery'nin replaceWith () ve html () işlevleri arasındaki fark nedir?

Bu HTML kodunu alın:

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

Yapıyor:

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

Sonuçlanacak:

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

Yapıyor:

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

Sonuçlanacak:

Aloha World

Dolayısıyla html () , öğenin içeriğini değiştirirken, replaceWith () gerçek öğeyi değiştirir.

replaceWith (), mevcut öğeyi değiştirirken, html () yalnızca içeriği değiştirir.

ReplaceWith () öğesinin aslında öğeyi silmeyeceğini, yalnızca DOM'dan kaldıracağını ve koleksiyonda size geri göndereceğini unutmayın.

Peter için bir örnek: http://jsbin.com/ofirip/2

Html () ve replaceWith () Jquery işlevlerini kullanmanın iki yolu vardır.

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

1.) html () vs replaceWith ()

var html = $('#test_id p').html(); "İçeriğim" i döndürecek

Ancak var replaceWith = $('#test_id p').replaceWith();tüm DOM nesnesini döndürecektir <p>My Content</p>.

2.) html ('değer') vs replaceWith ('değer')

$('#test_id p').html('<h1>H1 content</h1>'); size aşağıdaki çıktıyı verecektir.

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

Ama $('#test_id p').replaceWith('<h1>H1 content</h1>');size şu çıktıyı verecektir.

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

Eski soru ama bu birine yardımcı olabilir.

HTML'niz geçerli değilse, bu işlevlerin Internet Explorer ve Chrome / Firefox'ta nasıl çalıştığı konusunda bazı farklılıklar vardır.

HTML'nizi temizleyin ve belgelendiği gibi çalışsın.

(Geceme </center>maliyetimi kapatmıyorum!)

Bunun .empty().append()yerine kullanılabileceğini bilmek de faydalı olabilir .html(). Aşağıda gösterilen karşılaştırmada bu daha hızlıdır, ancak yalnızca bu işlevi birçok kez çağırmanız gerekiyorsa.

Bakınız: https://jsperf.com/jquery-html-vs-empty-append-test