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

Question

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

Answer 1

Tome 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 

Así html() reemplaza el contenido del elemento, mientras que replaceWith() reemplaza el elemento real.

Answer 2

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

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

Un ejemplo de Pedro: http://jsbin.com/ofirip/2

Answer 3

Pregunta anterior, 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.

Limpie su HTML y funcionarán según lo documentado.

(No cerrar mi </center> me cuesta la noche!)

Answer 4

Hay dos maneras de usar html() y funciones sustituir con() jQuery.

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

1.) html() vs sustituir con()

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

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

---

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

$('#test_id p').html('<h1>H1 content</h1>'); le dará la opción de venta después de salir.

<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 hacia fuera puesto.

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

Answer 5

También puede ser útil saber que .empty().append() también se puede utilizar en lugar de .html(). En el índice 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