Was ist der Unterschied zwischen jQuerys replaceWith () und html ()?

145

Was ist der Unterschied zwischen den Funktionen replaceWith () und html () von jQuery, wenn HTML als Parameter übergeben wird?

jquery DMCS
quelle
2
das hat mir geholfen! Ich habe versucht, den Text eines Labels mithilfe von jquery dynamisch zu ändern, und dieser Thread hat mir definitiv geholfen. Vielen Dank!
HereToLearn_

Antworten:

289

Nehmen Sie diesen HTML-Code:

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

Tun:

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

Wird darin enden, dass:

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

Tun:

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

Wird darin enden, dass:

Aloha World

So html () ersetzt den Inhalt des Elements, während replaceWith () ersetzt das eigentliche Element.

Paolo Bergantino
quelle
1
Schöne Erklärung!
Luis Gouveia
31

replaceWith () ersetzt das aktuelle Element, während html () einfach den Inhalt ersetzt.

Beachten Sie, dass replaceWith () das Element nicht tatsächlich löscht, sondern es einfach aus dem DOM entfernt und an Sie in der Auflistung zurückgibt.

Ein Beispiel für Peter: http://jsbin.com/ofirip/2

cgp
quelle
3
+1 sehr nützlich, um aufzuschreiben, dass replaceWith () das Element nicht tatsächlich löscht. Ich hatte das nicht herausgefunden!
Peter
2
Es ist wahr, es existiert immer noch. Es befindet sich nicht im DOM, Sie werden es also nicht sehen, aber es ist immer noch ein gültiges Stück HTML. Beweis: jsbin.com/ofirip/2
cgp
1
Ja, das stimmt. Vielen Dank für das Beispiel. Ich dachte daran, es aus meiner Sicht aus dem DOM (plus Garbage Collection) zu entfernen. Aber du bist technisch korrekt. Ich werde das entfernen -1und hoffe, dass dies für alle hilfreich ist. :)
Peter
1
Vielen Dank für den Hinweis, replaceWith (), das alte Element zurückzugeben, gab mir nur einige Frustration beim Debuggen :(
dain
2
Ja, ich kämpfe jetzt seit mindestens einer halben Stunde dagegen. Ich habe gerade festgestellt, dass die Funktion das ersetzte Element zurückgibt. Ich hatte erwartet, dass es das neue mit folgendem Code zurückgibt: var $form = $target.closest('tr').replaceWith(html) Es stellt sich heraus, dass es $formdas Element vor dem Ersetzen enthält. Seufzer
Pawel Krakowiak
5

Es gibt zwei Möglichkeiten, die Jquery-Funktionen html () und replaceWith () zu verwenden. 

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

1.) html () vs replaceWith ()

var html = $('#test_id p').html(); gibt "Mein Inhalt" zurück

Aber das var replaceWith = $('#test_id p').replaceWith();wird das gesamte DOM-Objekt von zurückgeben <p>My Content</p>.

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

$('#test_id p').html('<h1>H1 content</h1>'); wird Ihnen die folgende Ausgabe geben.

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

Aber das $('#test_id p').replaceWith('<h1>H1 content</h1>');wird dir folgendes geben.

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

Alte Frage, aber das kann jemandem helfen.

Es gibt einige Unterschiede in der Funktionsweise dieser Funktionen in Internet Explorer und Chrome / Firefox, wenn Ihr HTML nicht gültig ist.

Bereinigen Sie Ihren HTML-Code und sie funktionieren wie dokumentiert.

(Nicht zu schließen hat </center>mich meinen Abend gekostet!)

Benjamin Wootton
quelle
6
Deshalb sollten Sie Center nicht mehr verwenden. : p
Romain Stämme
2

Es kann auch nützlich sein zu wissen, dass .empty().append()dies auch anstelle von verwendet werden kann.html() . In der unten gezeigten Benchmark ist dies schneller, aber nur, wenn Sie diese Funktion mehrmals aufrufen müssen.

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

Mistajolly
quelle