Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

INSERER OU SUPPRIMER DU CONTENU HTML AVEC JQUERY

Insérer du contenu HTML en jQuery

Le jQuery met principalement à notre disposition quatre méthodes pour insérer du contenu HTML dans une page :

  • La méthode append() ;
  • La méthode prepend() ;
  • La méthode after() ;
  • La méthode before() ;

Les méthodes append() et prepend() vont respectivement nous permettre d’ajouter du contenu HTML à la fin et au début des éléments sélectionnés, c’est-à-dire juste avant la balise fermante d’un élément ou juste après la balise ouvrante de celui-ci.

Ces deux méthodes vont prendre en argument un contenu à ajouter.

Utilisation des méthodes jQuery append() et prepend()

On utilise append() et prepend() pour ajouter du contenu HTML

Essayer ce code

Dans l’exemple précédent, nous avons utilisé append() pour ajouter du texte à la fin de notre paragraphe p1 et prepend() pour ajouter du texte au début de notre paragraphe p2.

Evidemment, on va également pouvoir insérer de nouveaux éléments HTML dans notre page avec append() et prepend().

Pour faire cela, nous disposons de différentes méthodes : on peut ajouter du HTML brut ou utiliser les notations jQuery ou JavaScript connues.

Utiliser append() pour ajouter des éléments HTML dans notre page web

On utilise append() pour ajouter des éléments HTML dans notre page web

Essayer ce code

Ici, on crée trois paragraphes et on leur ajoute du texte de trois manières différentes : soit en utilisant du HTML brut que l’on place directement dans notre variable t1, soit en utilisant la méthode jQuery text() avec une paire de balises, soit en créant un nouvel élément avec la méthode JavaScript createElement().

On utilise ensuite append() ou prepend() afin d’intégrer les éléments créés dans notre page web.

Les méthodes jQuery after() et before() vont elles nous permettre respectivement d’insérer du contenu après et avant un élément HTML.

Faites bien attention à ne pas confondre after() et before() avec append() et prepend() : avec append(), par exemple, on insère du contenu à la fin d’un élément mais le contenu inséré se trouve bien dans l’élément en question tandis qu’avec after() le contenu est inséré après l’élément, c’est-à-dire à l’extérieur de ceuli-ci.

Cette distinction faite, les méthodes after() et before() vont fonctionner sur le même principe que append() et prepend().

Utilisation des méthodes jQuery after() et before()

On remarque bien la différence entre after() et append() en jQuery

Essayer ce code

Ici, on voit bien que le contenu est inséré à l’extérieur de notre élément div lorsqu’on utilise after() ou before(), mais bien à l’intérieur lorsqu’on utilise append().

Supprimer du contenu HTML en jQuery

Pour supprimer du contenu HTML, nous utiliserons principalement les méthodes remove() et empty() en jQuery.

La méthode remove(), tout d’abord, va nous permettre de supprimer un ou plusieurs éléments sélectionnés ainsi que tous leurs enfants.

On va pouvoir filtrer les éléments à supprimer avec remove() en lui passant un sélecteur CSS en argument.

Utilisation de la méthode remove() en jQuery

Résultat de l'utilisation de la méthode remove() en jQuery

Essayer ce code

Dans cet exemple, le bouton #b1 permet de supprimer le div id='div1' ainsi que ce qu'il contient tandis que le bouton #b2 nous permet de supprimer le div id='div2' et ses enfants.

La méthode empty() ne va elle supprimer que les enfants d’un ou de plusieurs éléments HTML.

A la différence de remove(), on ne va pas pouvoir passer de sélecteur CSS à cette méthode pour filtrer quels éléments supprimer, il va donc falloir le préciser en amont lors du ciblage jQuery.

Utilisation de la méthode jquery empty()

Résultat de l'utilisation de la méthode jquery empty()

Essayer ce code

Supprimer des attributs HTML en jQuery avec removeAttr()

Nous avons vu dans une partie précédente qu’on pouvait ajouter des attributs HTML dans une page avec la méthode jQuery attr().

Nous avons également vu la différence entre un attribut HTML et une propriété HTML, et quand utiliser la méthode attr() plutôt que prop() et inversement.

On va également pouvoir supprimer un attribut ou une propriété en jQuery grâce aux méthodes removeAttr() et removeProp().

Dans l'exemple suivant, nous allons nous concentrer sur removeAttr() étant donné que ces deux méthodes fonctionnent de manière similaire.

La méthode removeAttr() va prendre en argument le nom d’un attribut ou d’une liste d’attributs à supprimer.

On va par exemple pouvoir utiliser removeAttr() pour neutraliser des liens.

Utilisation de la méthode jQuery removeAttr()

On utilise la méthode jQuery removeAttr()

Essayer ce code

Ici, lorsqu’un utilisateur clique sur le bouton, l’attribut href de notre élément a est tout simplement supprimé, rendant le lien non cliquable.

Chapitre précédent

Chapitre suivant