• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Insérer et remplacer des éléments dans le DOM

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nous allons ici nous intéresser à une autre facette de jQuery : la modification du DOM. Les méthodes qui vont être examinées permettent d'insérer, de remplacer et de supprimer des éléments quelconques dans le DOM, et ainsi de modifier le contenu de la page affichée dans le navigateur.

Insérer du contenu

Toutes les méthodes passées en revue dans cette section seront testées sur le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion, copie et suppression de données</title>
  </head>
  <body>
    <h2 id="un">Lorem ipsum</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <hr>

    <h2 id="deux">Lorem ipsum suite</h2>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <hr>

    <h2 id="trois">Liste à puces</h2>
    <ul>
      <li>Premier élément</li>
      <li>Deuxième élément</li>
      <li>Troisième élément</li>
      <li>Quatrième élément</li>
    </ul>      
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
        }); 
    </script>
  </body>
</html>

L'image suivante vous montre comment apparaît la page lorsqu'aucun code jQuery n'a été inséré.

La page HTML avant l'intervention du code jQuery
La page HTML avant l'intervention du code jQuery

Plusieurs méthodes très pratiques permettent d'insérer du contenu dans ou en dehors de la sélection (entendez par là des éléments retournés par le sélecteur jQuery) :

  • append()insère du contenu à la fin de la sélection ;

  • prepend()insère du contenu au début de la sélection ;

  • before()insère du contenu avant la sélection ;

  • after()insère du contenu après la sélection.

Voici quelques exemples d'utilisation de ces méthodes.

Ajout d'une espace et de trois astérisques à la suite de chaque titre <h2>
$('h2').append(' ***');
Ajout de trois astérisques et d'une espace avant chaque titre <h2>
$('h2').prepend('*** ');
Ajout d'une ligne de séparation horizontale avant le titre <h2> #trois
$('#trois').before('<hr>');
Insertion de deux sauts de ligne après chaque balise <hr>
$('hr').after('<br><br>');

Comme vous le voyez, c'est plutôt simple ! Passons donc à la suite.

Remplacer des éléments

Pour remplacer la sélection, utilisez la méthodereplaceWith()en précisant le nouvel élément entre les parenthèses. Par exemple, pour remplacer les balises<hr>par des sauts de ligne, utilisez l'instruction suivante :

$('hr').replaceWith('<br>');

Une petite question à tout hasard : quelle instruction jQuery utiliseriez-vous pour remplacer tous les titres<h2>du document par des titres<h3>?

Alors, une petite idée ? Peut-être avez-vous songé à cette instruction :

$('h2').replaceWith('<h3>');

Mais quelle déception lorsque vous avez affiché le document dans votre navigateur ! En effet, vous devriez avoir quelque chose ressemblant à l'image suivante.

La méthode replaceWith() n'a pas produit l'effet escompté
La méthode replaceWith() n'a pas produit l'effet escompté

Les titres<h2>ont tout bonnement disparu ! Comprenez-vous ce qui s'est passé ? Le sélecteur$('h2')ne s'est pas contenté de sélectionner les balises<h2>, mais également leur contenu et la balise fermante</h2>. Les trois titres de niveau 2 ont donc été remplacés par une balise<h3>, sans contenu et sans balise fermante </h3>, ce qui a provoqué leur disparition.

Mais alors, est-ce que nous nous trouvons face à la première lacune de jQuery ? Bien sûr que non ! La solution consiste à parcourir les éléments sélectionnés avec la méthodeeach()et à effectuer un remplacementreplaceWith()personnalisé :

$('h2').each(function(){
  var elemH2 = $(this);
  elemH2.replaceWith('<h3>' + elemH2.text() + '</h3>');
});

La première ligne sélectionne tous les éléments<h2>du document ($.('h2')) et applique une fonction à chacun d'entre eux (each(function(){).

Pour limiter l'écriture et améliorer les performances du code, la deuxième ligne définit la variableelemH2et y mémorise l'élément<h2>en cours de traitement.

La troisième ligne applique la méthodereplaceWith()à l'élément jQuery en cours de traitement (elemH2.replaceWith) et le remplace par une balise ouvrante<h3>, suivie du texte contenu dans l'élément en cours de traitement (elemH2.text()) et d'une balise fermante</h3>.

La quatrième ligne met fin à la fonction et à la méthodeeach().

Insérer des éléments

Vous avez précédemment appris à insérer du contenu dans ou en dehors des éléments sélectionnés par un sélecteur jQuery. Ici, je vais vous montrer comment insérer des éléments dans l'arborescence du DOM. Les méthodes utilisées sont les suivantes :

  • eai.appendTo(cible)insère un élément à la fin de la cible ;

  • eai.prependTo(cible)insère un élément au début de la cible ;

  • eai.insertBefore(cible)insère un élément avant la cible ;

  • eai.insertAfter(cible)insère un élément après la cible.

eaireprésente l'élément àinsérer etciblereprésente l'élément avant ou après lequel doit se faire l'insertion.

Peut-être vous demandez-vous si les méthodesappendTo()etinsertAfter()ne sont pas équivalentes ? Et de même, si les méthodesprependTo()etinsertBefore()ne sont pas équivalentes ?

Eh bien,appendTo()insère un élément à la fin de la cible, tout en restant à l'intérieur de cette dernière, alors queinsertAfter()insère un élément après la cible.
D'une manière identique,prependTo()insère un élément au début de la cible tout en restant à l'intérieur de cette dernière, alors queinsertBefore()insère un élément avant la cible.

Voici quelques exemples d'utilisation de ces méthodes pour mieux les comprendre (ces exemples se basent sur le code HTML présenté au début de ce chapitre). Les instructions jQuery sont insérées après la ligne 32.

Ajout d'un élément de liste à puces après le deuxième élément
$('<li>Deuxième élément bis</li>').insertAfter($('li:nth-child(2)'));

Le résultat se trouve à l'image suivante.

La puce « Deuxième élément bis » a été insérée après la puce « Deuxième élément »
La puce « Deuxième élément bis » a été insérée après la puce « Deuxième élément »
Ajout d'une balise <hr> avant chaque titre <h2>
$('<hr>').prependTo($('h2'));

Le résultat se trouve à l'image suivante.

Un séparateur horizontal a été inséré avant chaque titre de niveau 2
Un séparateur horizontal a été inséré avant chaque titre de niveau 2

Et maintenant, une simple petite question pour vous inciter à réfléchir sur la méthodeprependTo(). D'après vous, que produit l'instruction suivante ?

$('<li>Deuxième élément bis</li>').prependTo($('li:nth-child(2)'));

Sans trop y réfléchir, vous pensez certainement qu'une puce « Deuxième élément bis » est ajoutée avant la puce « Deuxième élément ». Pourtant, si vous exécutez le code, vous obtenez l'image suivante.

L'effet de la méthode prependTo() n'est pas celui qui était attendu
L'effet de la méthode prependTo() n'est pas celui qui était attendu

D'où vient le problème ?

Rappelez-vous ce que j'ai dit à propos des différences entre les méthodesprependTo()etinsertBefore(). La première effectue une insertion à l'intérieur de la cible et la deuxième avant la cible. Après l'exécution de l'instruction jQuery, le code HTML de la liste à puces est donc le suivant :

<ul>
  <li>Premier élément</li>
  <li><li>Deuxième élément bis</li>Deuxième élément</li>
  <li>Troisième élément</li>
  <li>Quatrième élément</li>
</ul>

Totalement incohérent d'un point de vue sémantique, ce code est mal interprété par le navigateur qui affiche… quelque chose d'assez inattendu ! Ne rejetez pas la faute sur lui : dans ce cas précis, la méthodeinsertBefore()était plus adaptée à la situation. ;)

Déplacer du contenu

Pour déplacer un élément existant dans le document, vous utiliserez les méthodesappend(),prepend(),before()ouafter():

  • $('sel').append(depl);

  • $('sel').prepend(depl);

  • $('sel').before(depl);

  • $('sel').after(depl);

… oùselsélectionne l'élément avant ou après lequel doit se faire le déplacement etdeplreprésente l'élément à déplacer.

Les méthodesappend()etafter()sont comparables : elles déplacent toutes deux un élément après un autre élément. Mais attention, avecappend()le déplacement se fait avant la balise de fin de l'élément sélectionné, alors qu'avecafter()elle se fait après cette balise.

Les méthodesprepend()etbefore()sont également comparables : elles déplacent toutes deux un élément avant un autre élément. Mais attention, avecprepend()le déplacement se fait après la balise de début de l'élément sélectionné, alors qu'avecbefore()elle se fait avant cette balise.

À titre d'exemple, considérons le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Déplacement de contenu</title>
  </head>
  <body>
    <h2>Lorem ipsum</h2>
    <p id="un">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <hr>

    <h2>Lorem ipsum suite</h2>
    <p id="deux">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <hr>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
        }); 
    </script>    
  </body>
</html>

Ce code définit deux titres de niveau 2, chacun suivi d'un paragraphe de texte et d'un trait de séparation horizontal, comme le montre l'image suivante.

Le document, avant toute intervention du code jQuery
Le document, avant toute intervention du code jQuery

Remplacez la ligne 25 par l'instruction suivante, sauvegardez le code et rafraîchissez la page dans le navigateur.

$('#deux').after($('#un'));

Le résultat est à l'image suivante.

Le paragraphe d'identifiant #deux a été déplacé à la suite du paragraphe d'identifiant #un
Le paragraphe d'identifiant #deux a été déplacé à la suite du paragraphe d'identifiant #un

Comme vous pouvez le constater, le paragraphe d'identifiant#unn'est plus affiché après la première balise<h2>, mais après le paragraphe d'identifiant#deux. Il a donc été déplacé depuis la position qu'il occupait vers sa nouvelle position.

Dupliquer des éléments

Comme vous avez pu le constater précédemment, la méthodeafter()(ceci est également valable pour les méthodesappend(),prepend()etbefore()) déplace un élément existant vers la position indiquée dans le sélecteur. Si vous voulez non pas déplacer, mais dupliquer un élément existant, vous appliquerez la méthodeclone()à un sélecteur et, selon l'effet recherché, vous la ferez suivre de la méthodeappendTo(),prependTo(),insertBefore()ouinsertAfter().

À titre d'exemple, nous allons dupliquer le paragraphe d'identifiant#deuxet l'insérer avant le paragraphe d'identifiant#un. Voici l'instruction à utiliser :

$('#deux').clone().insertBefore($('#un'));

Le résultat se trouve à l'image suivante.

Le paragraphe d'identifiant #deux a été cloné et copié avant le paragraphe d'identifiant #un
Le paragraphe d'identifiant #deux a été cloné et copié avant le paragraphe d'identifiant #un

Si l'élément dupliqué a un ou plusieurs descendants, ils font eux aussi partie du clonage. Nous allons illustrer ce comportement en dupliquant tous les éléments qui composent la liste à puces du code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Déplacement de contenu</title>
  </head>
  <body>
    <h2>Lorem ipsum</h2>
    <p id="un">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <hr>

    <h2 id="trois">Liste à puces</h2>
    <ul>
      <li>Premier élément</li>
      <li>Deuxième élément</li>
      <li>Troisième élément</li>
      <li>Quatrième élément</li>
    </ul>
    <hr>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
        }); 
    </script>
  </body>
</html>

Ce code affiche un titre 2 suivi d'un paragraphe de texte et d'un trait de séparation, puis un autre titre 2 suivi d'une liste à puces composée de quatre éléments, comme le montre l'image suivante.

Le code HTML précédent sans aucune instruction jQuery.
Le code HTML précédent sans aucune instruction jQuery.

Insérez l'instruction suivante ligne 27 :

$('ul').clone().insertBefore($('h2:first'));

Cette instruction sélectionne la balise<ul>($('ul')), la duplique (clone()) et place le clone avant la première balise<h2>(insertBefore($('h2:first'))). Admirez le résultat visible à l'image suivante.

La liste à puces a été clonée et copiée avant le premier titre de niveau 2
La liste à puces a été clonée et copiée avant le premier titre de niveau 2

Lorsque plusieurs éléments sont retournés par le sélecteur, ils font tous partie du clonage. Ainsi par exemple, pour définir le sommaire du document en y faisant figurer tous les titres de niveau 2, vous pourriez utiliser les instructions suivantes :

$('<h1>Sommaire</h1>').insertBefore($('h2:first'));
$('h2').clone().insertAfter($('h1'));

La première instruction insère le titre de niveau 1 « Sommaire » ($('<h1>Sommaire</h1>')) avant le premier titre de niveau 2 du document (insertBefore($('h2:first'))).

La deuxième instruction sélectionne tous les titres de niveau 2 du document ($('h2')), les clone (clone()) et les insère après le titre de niveau 1 (insertAfter($('h1'))).

Le résultat se trouve à l'image suivante.

Le sommaire a été créé automatiquement grâce à jQuery
Le sommaire a été créé automatiquement grâce à jQuery

Entourer des éléments

La méthodewrap()permet d'entourer un élément par un ou plusieurs autres éléments créés à la volée. Voici sa syntaxe :

$('sel').wrap('elwrap');

… oùselest un sélecteur jQuery quelconque etelwrapreprésente le ou les éléments (ouvrants et fermants) à insérer autour de la sélection. Ces éléments peuvent être du code HTML, un sélecteur, un élément jQuery ou un élément du DOM. Quelle que soit leur nature, ils encadrent les éléments à entourer.

Pour bien comprendre le fonctionnement de cette méthode, nous allons raisonner sur le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Wrap</title>
  </head>
  <body>
    <h2 id="trois">Liste à puces</h2>
    <ul>
      <li>Premier élément</li>
      <li>Deuxième élément</li>
      <li>Troisième élément</li>
      <li>Quatrième élément</li>
    </ul>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
        }); 
    </script>    
  </body>
</html>

Ce code affiche un titre de niveau 2 et une liste à puces composée de quatre éléments. Supposons que vous vouliez afficher les éléments de la liste à puces en italique. Pour cela, il vous suffit de les entourer avec la balise<i>en utilisant la méthodewrap(). Insérez l'instruction suivante ligne 19 :

$('li').wrap('<i></i>');

Sauvegardez le document et affichez-le dans votre navigateur. Les quatre éléments de la liste à puces sont maintenant affichés en italique, comme le montre l'image suivante.

Chaque élément <li> est en italique
Chaque élément <li> est en italique

Et si vous voulez afficher les éléments de la liste en rouge, gras, italique et souligné, vous utiliserez l'instruction suivante :

$('li').wrap('<font color="red"><b><i><u></u></i></b></font>');

Passons à la vitesse supérieure en utilisant une fonction pour personnaliser les éléments insérés autour de la sélection.

La méthodewrap()a deux variantes :

  • wrapInner(), pour entourer le contenu d'un élément par un autre élément créé à la volée ;

  • wrapAll(), pour entourer d'une façon globale les éléments sélectionnés avec un autre élément créé à la volée.

Pour illustrer le fonctionnement de la méthodewrapInner(), supposons qu'une page HTML définisse le paragraphe suivant :

<p>Le texte du paragraphe</p>

Si vous exécutez l'instruction jQuery suivante :

$('p').wrapInner('<i></i>');

… le paragraphe se transforme en :

<p><i>Le texte du paragraphe</i></p>

Si vous aviez utilisé la méthodewrap()à la place :

$('p').wrap('<i></i>');

… le paragraphe se serait transformé en :

<i><p>Le texte du paragraphe</p></i>

Pour illustrer le fonctionnement de la méthodewrapAll(), nous allons raisonner sur le code suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Wrap</title>
    <style type="text/css">
      div { background: red;}
    </style>
  </head>
  
  <body>
    <p>Paragraphe 1</p>
    <p>Paragraphe 2</p>
    <p>Paragraphe 3</p>
    un texte isolé
    <p>Paragraphe 4</p>
    un autre texte isolé

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
        }); 
    </script>    
  </body>
</html>

Si vous exécutez ce code dans un navigateur, vous obtiendrez l'image suivante.

Le code précédent exécuté dans Internet Explorer
Le code précédent exécuté dans Internet Explorer

Comme vous le voyez, les paragraphes et le texte isolé apparaissent dans l'ordre où ils ont été définis. Nous allons maintenant appliquer la méthodewrapAll()aux paragraphes (autrement dit aux balises<p>) du document et les entourer d'une balise<div>. Le stylediva été défini dans le document : les éléments de ce style auront un arrière-plan rouge. Insérez l'instruction suivante en ligne 22 :

$('p').wrapAll('<div></div>');

Sauvegardez le document, puis rafraîchissez l'affichage dans le navigateur. Vous devriez obtenir l'image suivante.

Les quatre balises <p> ont été rassemblées
Les quatre balises <p> ont été rassemblées

Les paragraphes ont été rassemblés et entourés par une balise<div>. Le code HTML a été transformé comme suit :

<div>
  <p>Paragraphe 1</p>
  <p>Paragraphe 2</p>
  <p>Paragraphe 3</p>
  <p>Paragraphe 4</p>
</div>
un texte isolé un autre texte isolé

Supprimer des éléments

La méthoderemove()permet de supprimer les éléments retournés par un sélecteur jQuery. Par exemple, pour supprimer tous les titres<h2>du document, utilisez cette instruction :

$('h2').remove();

Ou encore, pour supprimer la troisième puce dans l'unique liste à puces du document, utilisez l'instruction suivante :

$('li:nth-child(2)').remove();

Un dernier exemple. Pour supprimer tous les paragraphes qui contiennent le mot « quelconque », utilisez l'instruction suivante :

$('p').remove(':contains("quelconque")');
  • Pour insérer du contenu dans un document, vous utiliserez les méthodesappend(),prepend(),before()etafter(). Pour remplacer des éléments, vous utiliserez la méthodereplaceWith(). Pour insérer des éléments dans le DOM, vous utiliserez les méthodesappendTo(),prependTo(),insertBefore()etinsertAfter(). Enfin, pour dupliquer des éléments, vous utiliserez la méthodeclone(), chaînée à la méthodeappendTo(),prependTo(),insertBefore()ouinsertAfter().

  • Les méthodeswrap(),wrapInner()etwrapAll()permettent d'entourer un élément par un ou plusieurs autres éléments créés à la volée.

  • Pour supprimer un élément, vous utiliserez la méthoderemove().

Exemple de certificat de réussite
Exemple de certificat de réussite