Manipulation du contenu HTML avec jQuery 3-3

Manipulation du contenu HTML avec jQuery 3-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

    • Dans les deux deux parties précédentes nous avons vues les Création de nœuds, Modification des nœuds et Insertion de contenu
    • jQuery nous propose plusieurs méthodes pour manipuler le contenu HTML. Avec ces méthodes, nous pouvons supprimer, créer, cloner, ajouter… Bref nous pouvons remodeler le DOM à notre convenance.
    • Dans cette dernière partie nous allons voir une récapitulation de tous ces méthodes



  3. Méthodes utilisées

    1. Manipuler le texte
      • Méthode Description
        text() Si cette méthode est appelée sans argument, elle renvoie le contenu textuel de l’élément sélectionné.
        Insère des éléments de HTML au début des éléments sélectionnés au format texte
        text(text) Lorsque cette méthode est utilisée pour définir le contenu, elle écrase le contenu de TOUS les éléments correspondants.
        html() Si cette méthode est appelée sans argument, elle renvoie le contenu HTML de l’élément sélectionné.
        html(content) Permet de modifier le contenu de l’objet si on l’appelle avec comme premier argument une chaîne de caractères qui joue le rôle du contenu.
    2. Remplacement et suppression
      • Méthode Description
        replaceWith() Remplace le contenu des éléments sélectionnés avec un nouveau contenu
        replaceAll() La méthode replaceAll() est une méthode intégrée dans jQuery qui est utilisée pour remplacer les éléments sélectionnés par de nouveaux éléments HTML.
        empty() La méthode empty() supprime tous le contenu des éléments choisis, y compris des nœuds de texte et les enfants.
        remove() La méthode remove() supprime de l’élément sélectionné le contenu indiqué par expression.
    3. Insertion de contenu
      • Méthode Description
        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
        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é.



Abonnez vous à notre chaîne YouTube gratuitement