Manipulation du contenu HTML avec jQuery 2-3

Manipulation du contenu HTML avec jQuery 2-3

  1. Objectifs

    • Connaitre les différentes méthodes qui permettent de manipuler le contenu d’une page HTML avec jQuery
    • Etre capable de récupérer le contenu textuel d’un élément, de modifier son code HTML, de lui ajouter un autre élément avant ou après, de lui incorporer un autre élément, de l’envelopper d’un autre élément, ainsi que de le copier, de le supprimer ou de le vider.
  2. Présentation

    • Pour insérer du contenu avant ou après un objet jQuery en utilisant les méthodes suivantes :
      • 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
    • Pour insérer du contenu autour d’un élément donné en utilisant les méthodes suivantes :
      • wrap(html) permet d’intégrer l’élément sélectionné dans le code HTML spécifié.
      • wrap(élément) permet d’intégrer l’élément sélectionné dans l’élément spécifié.



  3. Insertion de contenu

    1. Insertion à l’intérieur d’un élément donné
      • Les méthodes html() et text() réécrivent le contenu d’un élément : c’est-à-dire qu’elles les vident dans un premier temps, puis y écrivent.
      • Les méthodes prepend() et append() permettent d’ajouter du contenu à celui existant avant et après.
      1. prepend()
        • prepend()
          • La méthode prepend() permet d’insérer le contenu spécifié par le paramètre, au début de chaque élément dans l’ensemble des éléments correspondants.
          • La méthode prepend() insère le contenu spécifié au début des éléments sélectionnés.
          • Syntaxe: $(selector).prepend(content,function(index,html))
        • prependTo()
        • Différence entre prepend() et prependTo()
          • Les deux méthodes jQuery prepend() et prependTo() effectuent la même tâche, ajoutent un contenu texte ou HTML avant le contenu des éléments correspondants.
          • La principale différence réside dans la syntaxe.
          • Par exemple (Application M02)
          • $('.idDiv').prepend("<div class='idDivNew'>Nouvelle boite crée avec <b>prepend</b></div>");
          • $("<div class='idDivNew'>Nouvelle boite crée avec <b>prependTo</b></div>").prependTo('.idDiv');
          • Les deux méthodes ci-dessus exécutent la même tâche, mais avec une syntaxe différente, le nouveau contenu après prepend() ou prependTo() deviendra
          • Manipulation du contenu HTML avec jQuery 2-3

          • Vous trouverez le code complet ici : Application M02
      2. append()
        • append()
          • La méthode append() insère le contenu spécifié à la fin des éléments sélectionnés.
          • La méthode append() permet d’insérer le contenu spécifié à la fin de l’élément sélectionné en utilisant une fonction.
          • Syntaxe: $(selector).append(function(index,html))
          • Exemple:
        • appendTo()
          • La méthode appendTo() insère le contenu spécifié à la fin des éléments sélectionnés.
          • appendTo(): insère le contenu, spécifié par le paramètre, à la fin de chaque élément dans l’ensemble des éléments correspondants.
          • Syntaxe: $(contenu).appendTo(selecteur)
          • Exemple:
        • Différence entre append() et appendTo()
          • Les deux méthodes jQuery append() et appendTo() effectuent la même tâche, ajoutent un contenu textuel ou HTML après le contenu des éléments correspondants.
          • La principale différence réside dans la syntaxe.
          • Par exemple (Application M01)
          • $('.idDiv').append("<div class='idDivNew'>Nouvelle boite crée avec <b>append</b></div>");
          • $("<div class='idDivNew'>Nouvelle boite crée avec <b>appendTo</b></div>").appendTo('.idDiv');
          • Les deux méthodes ci-dessus exécutent la même tâche, mais avec une syntaxe différente, le nouveau contenu après append() ou appendTo() deviendra
          • Manipulation du contenu HTML avec jQuery 2-3

          • Vous trouverez le code complet ici : Application M01
    2. Insertion à l’extérieur d’un élément donné
      1. before()
        • before()
          • La méthode before() insère le contenu spécifié avant l’élément sélectionné.
          • Syntaxe: $(sélecteur).before(contenu)
          • Exemple:
          • $('.idDiv').before("<div class='idDivNew'>Nouvelle boite crée avec <b>Before</b></div>");
        • insertBefore()
          • La méthode before() insère le contenu spécifié avant la cible.
          • Syntaxe: $(sélecteur).insertbefore(contenu)
          • Exemple:
          • $("<div class='idDivNew'>Nouvelle boite crée avec <b>InsertBefore</b></div>").insertBefore('.idDiv');
        • Différence entre before() et insertBefore()
          • Les deux méthodes jQuery before() et insertBefore() effectuent la même tâche, ajoutent un contenu texte ou HTML avant les éléments correspondants.
          • La principale différence réside dans la syntaxe.
          • Par exemple (Application M03)
          • $('.idDiv').before("<div class='idDivNew'>Nouvelle boite crée avec <b>before</b></div>");
          • $("<div class='idDivNew'>Nouvelle boite crée avec <b>insertBefore</b></div>").insertBefore('.idDiv');
          • Les deux méthodes ci-dessus exécutent la même tâche, mais avec une syntaxe différente, le nouveau contenu après before() ou insertBefore() deviendra
          • Manipulation du contenu HTML avec jQuery 2-3

          • Vous trouverez le code complet ici : Application M03
      2. after()
        • after()
        • insertAfter()
        • Différence entre after() et insertAfter()
          • Les deux méthodes jQuery after() et insertAfter() effectuent la même tâche, ajoutent un contenu texte ou HTML après les éléments correspondants.
          • La principale différence réside dans la syntaxe.
          • Par exemple (Application M04)
          • $('.idDiv').after("<div class='idDivNew'>Nouvelle boite crée avec <b>after</b></div>");
          • $("<div class='idDivNew'>Nouvelle boite crée avec <b>insertAfter</b></div>").insertAfter('.idDiv');
          • Les deux méthodes ci-dessus exécutent la même tâche, mais avec une syntaxe différente, le nouveau contenu après after() ou insertAfter() deviendra
          • Manipulation du contenu HTML avec jQuery 2-3

          • Vous trouverez le code complet ici : Application M04
    3. Insertion autour d’un élément donné
      1. wrap(html)
        • wrap(html)
          • insère le contenu HTML spécifié autour de chaque élément correspondant.
        • wrap(élément)
      2. wrapAll()
        • Syntaxe: $(sélecteur).wrapAll(wrap_element)
        • Cette méthode accepte le paramètre unique wrap_element qui est :
          • utilisé pour spécifier quel élément sera enroulé autour de l’élément sélectionné.
          • Obligatoire
          • Valeurs possibles:
            • Sélecteur
            • Chaîne HTML
            • Élément
            • Objet jQuery
        • Par exemple (Application M05)
        • <script>
           $(document).ready(function() {
             $("button").click(function() {
               $("p").wrapAll("<div></div>");
             });
           });
          </script>

      3. wrapInner()
        • La méthode wrapInner() est utilisée pour encapsuler une structure HTML autour du contenu de chaque élément de l’ensemble d’éléments mis en correspondance.
        • Par exemple (Application M04)
        • $(".idDiv1").click(function () {
          $(this).wrapInner("<b></b>").css("background-color", "green");
          });
        • Manipulation du contenu HTML avec jQuery 2-3

        • Vous trouverez le code complet ici : Application M06
    4. Application

      1. Énoncé
        1. Ajouter un signe supérieur à et un espace avant chaque titre h2
        2. Refaire l’exercice précédent en remplacent successivement prepend par append, before et after pour mettre en évidence les différences de ces méthodes
        3. Insérer un trait horizontal après chaque paragraphe
        4. Ajouter une ligne de séparation horizontale avant le titre <h2> dont l’ID est titre3
        5. Ajouter une espace et de trois dièses à la suite de chaque titre <h2>
        6. Ajouter une espace et de trois dièses avant chaque titre <h2>
        7. Insérer deux sauts de ligne après chaque balise <hr>
        8. Remplacer les balises <hr>par des sauts de ligne
        9. Remplacer tous les titres <h2> du document par des titres <h3>
        10. Créer un élément de paragraphe avec du texte et ajouter-le à la fin du corps du document.
      2. Solution
        • Essayez de faire l’exercice de votre côté avant de regarder la Solution !
          1. $('h2').prepend('> ');
          2. Solution
          3. $('p').append('<hr>');
          4. $('#titre3').before('<hr>');
          5. $('h2').append(' ###');
          6. $('h2').prepend(' ###');
          7. $('hr').after('<br><br>');
          8. $('hr').replaceWith('<br>');
          9. $('h2').each(function(){
            var elemH2 = $(this);
            elemH2.replaceWith('<h3>' + elemH2.text() + '</h3>');
            });
          10. $("p").add("Exercices").appendTo( document.body );



Abonnez vous à notre chaîne YouTube gratuitement