reemplazar - str_replace jquery

¿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

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

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

1.) html () versus 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'') versus 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á la siguiente salida.

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

Answer 2

También puede ser útil saber que .empty().append() también se puede usar 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

Answer 3

Toma este código HTML:

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

Obra:

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

Resultará en:

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

Obra:

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

Resultará en:

Aloha World

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

Answer 4

Una vieja 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.

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

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

Answer 5

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á a usted en la colección.

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