Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

AUTRES OPERATIONS SUR LE DOM EN JQUERY

Remplacement d’éléments HTML en jQuery

Le jQuery nous offre deux méthodes nous permettant de remplacer du contenu HTML : les méthodes replaceWith() et replaceAll().

La méthode replaceWith() va remplacer chaque élément ciblé par un nouveau contenu qu’on va passer en argument.

De plus, replaceWith() va retourner la liste des éléments qui ont été supprimés.

Utilisation de la méthode replaceWith() en jQuery

On peut remplacer du contenu HTML avec replaceWith()

Essayer ce code

Ici, on remplace notre paragraphe possédant un attribut id='p1' ainsi que son contenu textuel par un nouveau contenu HTML.

On récupère les informations renvoyées par replaceWith() dans une variable (c’est-à-dire l’ancien élément HTML sous forme d’objet), puis on accède à son contenu avec text() et on l’affiche dans un élément span.

La méthode replaceAll() va produire des résultats similaires, mais va fonctionner de manière différente : on va devoir spécifier le ou les éléments à remplacer en argument.

De plus, cette nouvelle méthode ne va pas renvoyer d’information. Voyons immédiatement un exemple d’utilisation simple.

Utilisation de la méthode jQuery replaceAll()

Les deux méthodes jQuey replaceWith() et replaceAll() ont des modes de fonctionnement opposés mais produisent le même résultat

Essayer ce code

L’exemple ci-dessus illustre bien les modes de fonctionnement opposés des deux méthodes replaceWith() et replaceAll(). Cependant, on note que le résultat obtenu est similaire.

Entourer du contenu HTML en jQuery

En jQuery, on va pouvoir ajouter des éléments autour de toute une partie de code HTML ou, en d’autres termes, pouvoir entourer une structure HTML avec des éléments.

Pour faire cela, nous disposons de trois méthodes : wrap(), wrapAll() et wrapInner().

Ces trois méthodes vont prendre un élément avec lequel on souhaite entourer une structure HTML en argument.

L’unique différence entre ces trois méthodes est la suivante : wrap() va entourer chaque élément dans une sélection avec l’élément passé en argument, tandis que wrapAll() va entourer la sélection elle même avec l’élément passé en argument. La méthode wrapInner() va quant à elle entourer le contenu de chaque élément avec l’élément passé en argument.

Prenons un exemple pratique pour illustrer cela :

Utilisation des méthodes wrap(), wrapAll() et wrapInner()

On peut entourer une sélection HTML avec d’autres éléments en jQuery

Essayer ce code

Dans l’exemple précédent, j’ai utilisé des couleurs (regardez bien l’intérieur de l’élément style) afin de bien différencier les éléments div créés avec wrap(), wrapAll() et wrapInner().

Comme vous pouvez le remarquer, wrapAll() va entourer toute la sélection avec un élément choisi tandis que wrap() va entourer chaque élément de la sélection avec un autre élément.

La méthode wrapInner(), quant à elle, va encore une fois n’entourer que le contenu de chaque élément avec un autre élément. Ainsi, les éléments div créés se trouvent à l’intérieur des balises des éléments p.

Notez qu’on va également pouvoir « détourer » des éléments avec la méthode jQuery unwrap() qui n’est autre que l’inverse de la méthode wrap().

Ainsi, cette méthode va nous permettre de supprimer les éléments parents d’autres éléments. Notez que cette méthode n’a pas besoin d'argument pour fonctionner.

Utilisation de la méthode jQuery unwrap()

On utilise unwrap() pour supprimer les éléments parents d’une sélection d’éléments

Essayer ce code

Dans cet exemple, on se propose de laisser le choix à l’utilisateur d’ajouter ou de supprimer autant d’éléments div qu’il le souhaite via deux boutons.

Chapitre précédent

Chapitre suivant