Médiaforma

jQuery – Remplacer des éléments dans le DOM

Print Friendly

Commencez par saisir ce code et sauvegardez-le sous le nom remplacer-contenu.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion de contenu dans le DOM</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Partie 1</h2>
    <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    <ul>
      <li>un
      <li>deux
      <li>trois
      <li>quatre
    </ul>
    <hr>
    <h2>Partie 2</h2>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <ul>
      <li>premier
      <li>deuxième
      <li>troisième
    </ul>
    <hr>
    <script>
      $(function() {
      });
    </script>
  </body>
</html>

 

Vous utiliserez la méthode replaceWith() pour remplacer la sélection.

Par exemple, pour remplacer tous les éléments hr par des éléments br, vous utiliserez cette instruction :

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

 

Exercice : remplacez tous les paragraphes par le texte « Ceci est un paragraphe ».

Solution :

$('p').replaceWith('Ceci est un paragraphe');

 

Exercice : remplacer les listes ul par des listes ol

Si vous avez songé à cette instruction :

$('ul').replaceWith('ol');

 

Le résultat est loin de ce qui était attendu :

 

Pour comprendre ce qui s’est passé, utilisez Firebug.

Appuyez sur F12, sélectionnez l’onglet HTML et développez l’élément body :

 

Les éléments ul ont été remplacés par des éléments ol et les enfants li ont été supprimés.

Il va donc falloir utiliser une autre méthode. Vous allez parcourir chacun des éléments ul avec la méthode each() et les remplacer par une balise <ol> suivie du contenu de l’élément ol et de la balise </ol> :

$('ul').each(function(){
  var dum=$(this);
  dum.replaceWith('<ol>'+dum.html()+'</ol>');
});

 

Voici le résultat :

 

Voyons si vous avez compris. Ajoutez quelques instructions jQuery pour remplacer tous les titres h2 de la page par des titres h1.

Voici la solution :

$('h2').each(function(){
  var dum=$(this);
  dum.replaceWith('<h1>'+dum.html()+'</h1>');
});
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply