+1 muito útil para que seja anotado que replaceWith () na verdade não exclui o elemento. Eu não tinha entendido isso!
Peter Peter
2
É verdade, ainda existe. Ele não está no DOM, então você não o verá, mas ainda é um pedaço válido de HTML. Prova: jsbin.com/ofirip/2
CGP
1
Sim isso é verdade. obrigado por colocar o exemplo. Eu estava pensando em removê-lo do DOM (mais coleta de lixo) como essencialmente uma exclusão do meu ponto de vista. Mas você está tecnicamente correto. Vou remover o -1e espero que isso seja útil para todos. :)
Peter
1
Agradecimentos para a nota, replaceWith () retornando o elemento velho só me deu alguma frustração depuração :(
Dain
2
Sim, eu estou lutando contra isso há pelo menos meia hora agora, só percebi que a função retorna o elemento substituído, eu esperava que ele retornasse o novo com código como este: var $form = $target.closest('tr').replaceWith(html) Acontece que ele $formcontém o elemento antes da substituição. ssh
Pawel Krakowiak
5
Existem duas maneiras de usar as funções html () e replaceWith () Jquery.
<divid="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.
<divid="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.
É por isso que você não deve mais usar o centro. : p
Romain Tribes
2
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.
Respostas:
Pegue este código HTML:
Fazendo:
Vai resultar em:
Fazendo:
Vai resultar em:
Então html () substitui o conteúdo do elemento, enquanto replaceWith () substitui o elemento real.
fonte
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
fonte
-1e espero que isso seja útil para todos. :)var $form = $target.closest('tr').replaceWith(html)Acontece que ele$formcontém o elemento antes da substituição. sshExistem duas maneiras de usar as funções html () e replaceWith () Jquery.
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.Mas o
$('#test_id p').replaceWith('<h1>H1 content</h1>');dará a você o seguinte exposto.fonte
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!)fonte
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
fonte