Qual'è la differenza tra jQuery's replaceWith () e html ()?

145

Qual è la differenza tra le funzioni replaceWith () e html () di jQuery quando HTML viene passato come parametro?

jquery

— DMCS
fonte

2

questo mi ha aiutato! Stavo cercando di cambiare dinamicamente il testo di un'etichetta usando jquery e questo thread mi ha sicuramente aiutato. Grazie!

— HereToLearn_

289

Prendi questo codice HTML:

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

fare:

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

Si tradurrà in:

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

fare:

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

Si tradurrà in:

Aloha World

Quindi html () sostituisce il contenuto dell'elemento, mentre replaceWith () sostituisce l'elemento effettivo.

— Paolo Bergantino
fonte

1

Bella spiegazione!

— Luis Gouveia,

31

replaceWith () sostituirà l'elemento corrente, mentre html () sostituisce semplicemente il contenuto.

Si noti che replaceWith () non eliminerà effettivamente l'elemento ma lo rimuoverà semplicemente dal DOM e lo restituirà all'utente nella raccolta.

Un esempio per Peter: http://jsbin.com/ofirip/2

— CGP
fonte

3

+1 molto utile per averlo annotato che replaceWith () non elimina effettivamente l'elemento. Non l'avevo capito!

— Peter,

2

È vero, esiste ancora. Non è nel DOM, quindi non lo vedrai, ma è ancora un pezzo di HTML valido. Prova: jsbin.com/ofirip/2

— cgp

1

si è vero. grazie per aver dato l'esempio. Stavo pensando di rimuoverlo dal DOM (oltre alla garbage collection) come essenzialmente cancellazione dal mio punto di vista. Ma sei tecnicamente corretto. Rimuoverò -1e spero che questo sarà utile per tutti. :)

— Peter,

1

Grazie per la nota, replaceWith () che restituisce il vecchio elemento mi ha dato solo un po 'di frustrazione nel debug :(

— dain

2

Sì, lo sto combattendo da almeno mezz'ora, mi sono appena reso conto che la funzione restituisce l'elemento sostituito, mi aspettavo che restituisse quello nuovo con codice come questo: var $form = $target.closest('tr').replaceWith(html) risulta che $formcontiene l'elemento prima della sostituzione. sospiro

— Pawel Krakowiak,

5

Esistono due modi per utilizzare le funzioni jquery html () e replaceWith ().

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

1.) html () vs replaceWith ()

var html = $('#test_id p').html(); restituirà il "Mio contenuto"

Ma var replaceWith = $('#test_id p').replaceWith();restituirà l'intero oggetto DOM di <p>My Content</p>.

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

$('#test_id p').html('<h1>H1 content</h1>'); ti darà il seguente risultato.

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

Ma $('#test_id p').replaceWith('<h1>H1 content</h1>');ti darà il seguente risultato messo.

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

— harsha
fonte

2

Vecchia domanda ma questo può aiutare qualcuno.

Ci sono alcune differenze nel modo in cui queste funzioni operano in Internet Explorer e Chrome / Firefox SE il tuo HTML non è valido.

Pulisci il tuo HTML e funzioneranno come documentato.

(Non chiudermi mi è </center>costato la serata!)

— Benjamin Wootton
fonte

6

Ecco perché non dovresti più usare center. : p

— Romain Tribes

2

Può anche essere utile sapere che .empty().append()può essere utilizzato anche al posto di .html(). Nel benchmark mostrato sotto questo è più veloce ma solo se è necessario chiamare questa funzione più volte.

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

— mistajolly
fonte