jQuery propose quelques méthodes faciles d’utilisation pour ajouter des éléments dynamiquement dans notre code HTML après que la page se soit chargée.

Soit notre code HTML :

<body>
  <span class='ma_classe'>-- Mon premier span ma_classe --</span>
  <span class='ma_classe'>-- Mon deuxième span ma_classe --</span>
  <div id="mon_div" style="border:1px solid gray"> Ce DIV est initialement dans le DOM en fin de fichier </div>
</body>

insertAfter : Insérer du code après un autre élément 

$("<p>!Je suis les éléments de classe ma_classe!</p>").insertAfter('.ma_classe');

Le paragraphe sera inséré après la balise de fermeture de l’élément ma_classe

insertAfter() : Déplacer un élément dans le DOM

La méthode insertAfter peut aussi être utilisée pour déplacer un élément si elle est affectée à un élement se trouvant déjà dans le DOM

$("span").insertAfter('#mon_div');

Tous les éléments <span> existants dans le DOM seront déplacés après l’élément d’identifiant #mondiv [Voir exemple ci dessus ]

insertBefore() : Deplacer/Ajouter un élément juste avant un autre élément 

La métode insterBefore s’utilise de la même manière mais insère le nouvel élément devant l’élément passé en paramètre.

$("Un petit texte à insérer dans le DOM juste avant mon_div").insertBefore('#mon_div');

append() : Insérer un élément à l’intérieur d’un autre élément (à la fin de ce dernier)

La méthode append permet quant à elle d’insérer un élément non plus avant ou après mais à l’intérieur de la balise de l’élément auquelle elle est affectée, et ce juste avant la balise de fermeture de cet élément.
Ici on insére un paragraphe dans le div d’identifiant mon_div

$( "#mon_div" ).append( "<p>** Je mets ça en fin de DIV **</p>" );

prepend() : Insérer un élément à l’intérieur d’un autre élément (au début de ce dernier)

prepend() fonctionne comme append, à la différence que l’élément va être ajouté au début de son conteneur, juste après la balise d’ouverture.

$( "#mon_div" ).prepend( "<p>++ Tiens je rajoute ça en début de div ++</p>" );

append et prepend permettent aussi de sélectionné un élément du DOM et de le déplacer à l’intérieur d’un autre élément (à la fin ou au début comme vous l’avez compris).

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.