le MEMO du WEB développeur
••• JQuery •••  Liste des Mémos, astuces et bonnes pratiques

Ajouter / Déplacer dynamiquement un élément dans le DOM avec jQuery

-- Mon premier span ma_classe -- -- Mon deuxième span ma_classe --
Ce DIV est initialement dans le DOM en fin de fichier

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).

publié le 07/08/2013 par Memo Web
Commenter le Mémo :

Empêcher de coller du texte dans un champs input de type text
JQuery - Queue() : Attendre qu'une animation se termine avant de commencer la suivante
Jquery récupérer les valeurs de checkbox, select et radio
Détecter un click à l'extérieur d'un élément avec JQuery
Rajouter un élément dans le DOM
StopPropagation() ou Empêcher un évenement de se propager aux parents de l'élément
DatePicker de JQuery : Déployer le calendrier à l'ouverture de la page
$("#calendar").fullCalendar is not a function
Récupérer le contenu ou afficher du texte dans un textarea en JQuery
Siblings() Parcours des frères immédiats d'un élément
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos