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 :

Problème évenement click sous IE
Sélecteurs RegExp et JQuery
Plugin JQuery Select Box / Drop-Down / Liste déroulante. Un joli select
Afficher une image différente selon la date de l'année en javascript
Atteindre une ancre avec JQuery
StopPropagation() ou Empêcher un évenement de se propager aux parents de l'élément
Empêcher de coller du texte dans un champs input de type text
Siblings() Parcours des frères immédiats d'un élément
Charger JQuery directement via les librairies google
Détecter lorsqu'on appuie sur la touche entrée en JQuery
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