Quelle est la différence entre replaceWith () et html () de jQuery?

145

Quelle est la différence entre les fonctions replaceWith () et html () de jQuery lorsque HTML est passé en paramètre?

jquery DMCS
la source
2
cela m'a aidé! J'essayais de changer le texte d'une étiquette de manière dynamique en utilisant jquery et ce fil de discussion m'a définitivement aidé. Merci!
HereToLearn_

Réponses:

289

Prenez ce code HTML:

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

Faire:

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

Aura pour résultat:

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

Faire:

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

Aura pour résultat:

Aloha World

Ainsi, html () remplace le contenu de l'élément, tandis que replaceWith () remplace l'élément réel.

Paolo Bergantino
la source
1
Belle explication!
Luis Gouveia
31

replaceWith () remplacera l'élément actuel, tandis que html () remplacera simplement le contenu.

Notez que replaceWith () ne supprimera pas réellement l'élément mais le supprimera simplement du DOM et vous le renverra dans la collection.

Un exemple pour Peter: http://jsbin.com/ofirip/2

cgp
la source
3
+1 très utile pour avoir écrit que replaceWith () ne supprime pas réellement l'élément. Je n'avais pas compris cela!
Peter
2
C'est vrai, ça existe toujours. Ce n'est pas dans le DOM, donc vous ne le verrez pas, mais c'est toujours un morceau de HTML valide. Preuve: jsbin.com/ofirip/2
cgp
1
Oui c'est vrai. merci d'avoir donné l'exemple. Je pensais le supprimer du DOM (plus le ramasse-miettes) comme essentiellement une suppression de mon point de vue. Mais vous avez techniquement raison. Je vais supprimer le -1et j'espère que cela sera utile pour tous. :)
Peter
1
Merci pour la note, replaceWith () renvoyant l'ancien élément m'a juste donné une certaine frustration de débogage :(
dain
2
Oui, je me bats contre cela depuis au moins une demi-heure maintenant, je viens de réaliser que la fonction renvoie l'élément remplacé, je m'attendais à ce qu'elle renvoie le nouveau avec un code comme celui-ci: var $form = $target.closest('tr').replaceWith(html) il s'avère qu'il $formcontient l'élément avant le remplacement. soupir
Pawel Krakowiak
5

Il existe deux façons d'utiliser les fonctions Jquery html () et replaceWith (). 

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

1.) html () vs replaceWith ()

var html = $('#test_id p').html(); renverra le "Mon contenu"

Mais le var replaceWith = $('#test_id p').replaceWith();renverra tout l'objet DOM de <p>My Content</p>.

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

$('#test_id p').html('<h1>H1 content</h1>'); vous donnera les résultats suivants.

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

Mais le $('#test_id p').replaceWith('<h1>H1 content</h1>');vous donnera les résultats suivants.

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

Ancienne question mais cela peut aider quelqu'un.

Il existe quelques différences dans la façon dont ces fonctions fonctionnent dans Internet Explorer et Chrome / Firefox SI votre code HTML n'est pas valide.

Nettoyez votre HTML et ils fonctionneront comme documenté.

(Ne pas fermer </center>ma soirée m'a coûté ma soirée!)

Benjamin Wootton
la source
6
C'est pourquoi vous ne devriez plus utiliser le centre. : p
Romain Tribes
2

Il peut également être utile de savoir qui .empty().append()peut également être utilisé à la place de .html(). Dans le benchmark illustré ci-dessous, c'est plus rapide, mais seulement si vous devez appeler cette fonction plusieurs fois.

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

Mistajolly
la source