Médiaforma

jQuery – Insérer des éléments dans le DOM

Print Friendly

Quatre méthodes permettent d’insérer un élément (el) avant ou après l’élément ciblé (cible) :

  • el.appendTo(cible) insère un élément à la fin de la cible
  • el.prependTo(cible) insère un élément au début de la cible
  • el.insertBefore(cible) insère un élément avant la cible
  • el.insertAfter(cible) insère un élément après la cible

Saisissez ce code dans Notepad++ et sauvegardez-le sous le nom inserer-elements.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion d'éléments</title>
    <script src="jquery.js"></script>
  </head>
  <body>
<h2>Titre</h2>
  <div class="parent">
    <div>Bonjour</div>
    <div>jQuery</div>
  </div>
  <script>
      $(function() {
        //$('<p>Comment ça va ?</p>').appendTo('.enfant');
      });
    </script>
  </body>
</html>

 

Exécutez ce code dans Firefox. Supprimez les commentaires et ré exécutez ce code. Voici le résultat :

 

Expérimentez les méthodes prependTo(), insertBefore() et insertAfter() pour comprendre leurs différences.

Si vous ne voyez pas la différence entre appendTo() et insertAfter(), ou entre prependTo() et insertBefore(), utilisez Firebug pour visionner le code généré. Pour cela, appuyez sur la touche F12, sélectionnez l’onglet HTML et développez les balises <body> puis <div> :

 

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply