Manipulation du contenu HTML avec jQuery 3-3
Manipulation du contenu HTML avec jQuery 3-3
-
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.
-
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
-
Méthodes utilisées
-
Manipuler le texte
-
Remplacement et suppression
-
Insertion de contenu
| 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. |
| 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. |
| 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é. |
