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

Question

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

Answer 1

Prenez ce code HTML :

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

Faire :

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

Il en résultera :

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

Faire :

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

Il en résultera :

Aloha World

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

Answer 2

ReplaceWith() remplacera l'élément courant, alors que html() remplace simplement le contenu.

Notez que la fonction replaceWith() ne supprime pas réellement l'élément, mais le retire simplement du DOM et le renvoie dans la collection.

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

Answer 3

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

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

1.) html() vs replaceWith()

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

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

---

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

$('#test_id p').html('<h1>H1 content</h1>'); vous donnera le résultat suivant.

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

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

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

Answer 4

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

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

Answer 5

Vieille question mais cela peut aider quelqu'un.

Il existe quelques différences dans le fonctionnement de ces fonctions dans Internet Explorer et Chrome / Firefox SI votre HTML n'est pas valide.

Nettoyez votre HTML et ils fonctionneront comme prévu.

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