Jaka jest różnica między metodą replaceWith () jQuery i html ()?

145

Jaka jest różnica między funkcjami replaceWith () i html () jQuery, gdy HTML jest przekazywany jako parametr?

jquery DMCS
źródło
2
to mi pomogło! Próbowałem dynamicznie zmieniać tekst etykiety za pomocą jquery i ten wątek zdecydowanie mi pomógł. Dzięki!
HereToLearn_

Odpowiedzi:

289

Weź ten kod HTML:

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

Robić:

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

Spowoduje:

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

Robić:

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

Spowoduje:

Aloha World

Więc html () zastępuje zawartość elementu, a replaceWith () zastępuje rzeczywisty element.

Paolo Bergantino
źródło
1
Niezłe wyjaśnienie!
Luis Gouveia
31

replaceWith () zastąpi bieżący element, podczas gdy html () po prostu zastępuje zawartość.

Zauważ, że funkcja replaceWith () w rzeczywistości nie usunie elementu, ale po prostu usunie go z DOM i zwróci do Ciebie w kolekcji.

Przykład dla Petera: http://jsbin.com/ofirip/2

cgp
źródło
3
+1 bardzo przydatne, aby zapisać, że funkcja replaceWith () w rzeczywistości nie usuwa elementu. Nie doszedłem do tego!
Peter,
2
To prawda, nadal istnieje. Nie ma go w DOM, więc go nie zobaczysz, ale nadal jest to prawidłowy fragment HTML. Dowód: jsbin.com/ofirip/2
cgp
1
tak to prawda. dzięki za pokazanie przykładu. Myślałem o usunięciu go z DOM (plus odśmiecanie) jako o usunięciu z mojego punktu widzenia. Ale masz techniczną poprawność. Usunę -1i mam nadzieję, że będzie to pomocne dla wszystkich. :)
Peter
1
Dzięki za notatkę, replaceWith () zwracając stary element właśnie dało mi trochę frustracji przy debugowaniu :(
dain
2
Tak, walczę z tym od co najmniej pół godziny, właśnie zdałem sobie sprawę, że funkcja zwraca zastąpiony element, spodziewałem się, że zwróci nowy z takim kodem: var $form = $target.closest('tr').replaceWith(html) Okazuje się, że $formzawiera element przed zamianą. westchnienie
Paweł Krakowiak
5

Istnieją dwa sposoby używania funkcji html () i replaceWith () Jquery. 

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

1.) html () vs replaceWith ()

var html = $('#test_id p').html(); zwróci „Moje treści”

Ale var replaceWith = $('#test_id p').replaceWith();zwróci cały obiekt DOM z <p>My Content</p>.

2.) html ('wartość') vs replaceWith ('wartość')

$('#test_id p').html('<h1>H1 content</h1>'); da ci następujący wynik.

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

Ale $('#test_id p').replaceWith('<h1>H1 content</h1>');da ci następujące dane.

<div id="test_id">
      <h1>H1 content</h1>
</div>
Harsha
źródło
2

Stare pytanie, ale to może komuś pomóc.

Istnieją pewne różnice w działaniu tych funkcji w przeglądarkach Internet Explorer i Chrome / Firefox, JEŚLI Twój kod HTML jest nieprawidłowy.

Wyczyść swój kod HTML, a będą działać zgodnie z dokumentacją.

(Nie zamykam </center>kosztu mojego wieczoru!)

Benjamin Wootton
źródło
6
Dlatego nie powinieneś już używać centrum. : p
Romain Tribes