¿Cuál es la diferencia entre jQuery's replaceWith () y html ()?

145

¿Cuál es la diferencia entre las funciones replaceWith () y html () de jQuery cuando se pasa HTML como parámetro?

jquery DMCS
fuente
2
esto me ayudó! Estaba tratando de cambiar el texto de una etiqueta dinámicamente usando jquery y este hilo definitivamente me ayudó. ¡Gracias!
HereToLearn_

Respuestas:

289

Toma este código HTML:

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

Haciendo:

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

Resultará en:

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

Haciendo:

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

Resultará en:

Aloha World

Entonces html () reemplaza el contenido del elemento, mientras replaceWith () reemplaza el elemento real.

Paolo Bergantino
fuente
1
Buena explicación!
Luis Gouveia
31

replaceWith () reemplazará el elemento actual, mientras que html () simplemente reemplaza el contenido.

Tenga en cuenta que el replaceWith () en realidad no eliminará el elemento, sino que simplemente lo eliminará del DOM y se lo devolverá en la colección.

Un ejemplo para Peter: http://jsbin.com/ofirip/2

cgp
fuente
3
+1 es muy útil para tenerlo escrito que replaceWith () en realidad no elimina el elemento. ¡No había descubierto esto!
Peter
2
Es cierto, todavía existe. No está en el DOM, por lo que no lo verá, pero sigue siendo una pieza válida de HTML. Prueba: jsbin.com/ofirip/2
cgp
1
sí, es cierto. Gracias por poner el ejemplo. Estaba pensando en eliminarlo del DOM (más la recolección de basura) como esencialmente una eliminación de mi punto de vista. Pero eres técnicamente correcto. Eliminaré el -1y espero que esto sea útil para todos. :)
Peter
1
Gracias por la nota, replaceWith () devolviendo el elemento anterior solo me dio un poco de frustración de depuración :(
desde el
2
Sí, he estado luchando contra esto durante al menos media hora, me di cuenta de que la función devuelve el elemento reemplazado, esperaba que devolviera el nuevo con un código como este: var $form = $target.closest('tr').replaceWith(html) Resulta que $formcontiene el elemento antes del reemplazo. suspiro
Pawel Krakowiak
5

Hay dos formas de usar las funciones html () y replaceWith () Jquery. 

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

1.) html () vs replaceWith ()

var html = $('#test_id p').html(); devolverá el "Mi contenido"

Pero el var replaceWith = $('#test_id p').replaceWith();devolverá todo el objeto DOM de <p>My Content</p>.

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

$('#test_id p').html('<h1>H1 content</h1>'); le dará la siguiente salida.

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

Pero el $('#test_id p').replaceWith('<h1>H1 content</h1>');le dará el siguiente puesto.

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

Antigua pregunta pero esto puede ayudar a alguien.

Existen algunas diferencias en cómo funcionan estas funciones en Internet Explorer y Chrome / Firefox SI su HTML no es válido.

Limpia tu HTML y funcionarán según lo documentado.

(¡No cerrar mi </center>costo me costó la noche!)

Benjamin Wootton
fuente
66
Es por eso que ya no debes usar el centro. : p
Romain Tribes
2

También puede ser útil saber que .empty().append()también se puede usar en lugar de.html() . En el punto de referencia que se muestra a continuación, esto es más rápido, pero solo si necesita llamar a esta función muchas veces.

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

equivocadamente
fuente