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).
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!