Qual é a diferença entre replaceWith () e html () do jQuery?

Qual é a diferença entre as funções replaceWith () e html () do jQuery quando o HTML está sendo passado como parâmetro?

Pegue este código HTML:

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

Fazendo:

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

Vai resultar em:

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

Fazendo:

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

Vai resultar em:

Aloha World

Então html () substitui o conteúdo do elemento, enquanto replaceWith () substitui o elemento real.

replaceWith () substituirá o elemento atual, enquanto html () simplesmente substitui o conteúdo.

Observe que o replaceWith () na verdade não exclui o elemento, mas simplesmente o remove do DOM e o devolve na coleção.

Um exemplo para Peter: http://jsbin.com/ofirip/2

Existem duas maneiras de usar as funções html () e replaceWith () Jquery.

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

1.) html () vs replaceWith ()

var html = $('#test_id p').html(); retornará o "Meu conteúdo"

Mas o var replaceWith = $('#test_id p').replaceWith();retornará todo o objeto DOM de <p>My Content</p>.

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

$('#test_id p').html('<h1>H1 content</h1>'); vai lhe dar o seguinte posto.

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

Mas o $('#test_id p').replaceWith('<h1>H1 content</h1>');dará a você o seguinte exposto.

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

Pergunta antiga, mas isso pode ajudar alguém.

Existem algumas diferenças na maneira como essas funções operam no Internet Explorer e Chrome / Firefox SE o seu HTML não é válido.

Limpe seu HTML e eles funcionarão conforme documentado.

(Não fechar meu </center>custo me custou a noite!)

Também pode ser útil saber que .empty().append()também pode ser usado em vez de .html(). No benchmark mostrado abaixo, isso é mais rápido, mas apenas se você precisar chamar essa função várias vezes.

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