Insérer ou déplacer des éléments et leur contenu dans le DOM avec jQuery

jQuery possède de nombreuses méthodes nous permettant d’insérer du contenu et en particulier des éléments dans le DOM. On va pouvoir classer ces méthodes selon 3 catégories :

  • Les méthodes qui permettent d’insérer du contenu dans un élément HTML, , c’est-à-dire du contenu qui sera enfant de l’élément ;
  • Les méthodes qui permettent d’insérer du contenu avant ou après un élément HTML, , c’est-à-dire du contenu qui sera frère de l’élément ;
  • Les méthodes qui permettent d’insérer du contenu autour d’un élément HTML, c’est-à-dire du contenu qui sera parent de l’élément.

Notez que si le contenu HTML qu’on souhaite insérer existe déjà, alors il sera déplacé à la place où on souhaite l’insérer.

 

Insérer du contenu dans un élément

En plus des méthodes html() et text() étudiées dans la leçon précédente, jQuery met à notre disposition quatre autres méthodes pour insérer du contenu ou des éléments dans d’autres éléments : les méthodes prepend(), append() prependTo() et appendTo().

Les méthodes prepend() et append() vont respectivement nous permettre d’insérer du contenu en tant que premier et dernier enfant d’un élément cible. Le contenu à insérer devra être passé en argument de ces méthodes.

See the Pen
Cours jQuery 2.4.1
by Pierre (@pierregiraud)
on CodePen.

Les méthodes prependTo() et appendTo() vont nous permettre d’effectuer les mêmes opérations que prepend() et append(). La différence entre ces deux sets de méthodes réside dans leur syntaxe : avec prependTo() et appendTo(), le contenu à insérer va précéder les méthodes et sera inséré au sein des éléments spécifiés en argument.

Le code ci-dessous, par exemple, va produire le même résultat que le précédent :

See the Pen
Cours jQuery 2.4.2
by Pierre (@pierregiraud)
on CodePen.

 

Insérer du contenu avant ou après un élément

Pour insérer du contenu avant ou après un élément, on va pouvoir utiliser l’une des méthodes jQuery before(), after(), insertBefore() ou insertAfter().

Les méthodes before() et after() vont respectivement nous permettre d’ajouter du contenu avant et après une sélection d’éléments. Le contenu à ajouter devra être passé en argument.

Les méthodes insertBefore() et insertAfter() vont nous permettre d’effectuer les mêmes opérations que before() et after(). Là encore, la différence est syntaxique : on va cette fois-ci devoir préciser le contenu à ajouter avant les méthodes et passer la sélection d’éléments auxquels le contenu doit être ajouté en argument de celles-ci.

See the Pen
Cours jQuery 2.4.3
by Pierre (@pierregiraud)
on CodePen.

 

Insérer du contenu autour d’un élément

Pour insérer une structure HTML autour d’une sélection d’éléments, on va pouvoir utiliser les méthodes wrap(), wrapAll() ou wrapInner().

La méthode wrap() va nous permettre d’ajouter une structure HTML autour de chaque élément de notre sélection initiale. La structure enveloppante devra être passée en argument de la méthode.

La méthode wrapAll() va nous permettre d’ajouter une structure HTML autour de l’ensemble de notre sélection. On va à nouveau devoir passer cette structure en argument de la méthode.

La méthode wrapInner() va nous permettre d’ajouter une structure HTML autour du contenu de chaque élément de notre sélection. On passera la structure à ajouter en argument de la méthode une nouvelle fois.

Si on utilise plusieurs de ces méthodes dans un même script pour ajouter des structures HTML autour d’une même sélection d’éléments, il faudra faire attention à l’ordre des instructions afin d’obtenir le résultat voulu. On commencera par ajouter la structure la plus globalement englobante et on ajoutera les structures qui vont englober les éléments de manière plus spécifique ensuite. Concrètement, cela revient à appliquer wrapAll() d’abord, puis wrap() et enfin wrapInner().

See the Pen
Cours jQuery 2.4.4
by Pierre (@pierregiraud)
on CodePen.

Ajouter des éléments dans le DOM en jQuery avec wrap

 

Déplacer un contenu HTML dans le DOM

Comme je l’ai précisé au début de cette leçon, si on essaie d’insérer un contenu qui existe déjà avec l’une des méthodes vues précédemment, alors le contenu sera tout simplement déplacé à l’endroit où on souhaite l’insérer.

See the Pen
Cours jQuery 2.4.5
by Pierre (@pierregiraud)
on CodePen.

Déplacer un contenu HTML dans le DOM en jQuery

Laisser un commentaire