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?


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.


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


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>

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!)


6
C'est pourquoi vous ne devriez plus utiliser le centre. : p
Romain Tribes

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.