Jquery et le DOM

Vous savez que l'interactivité repose sur la modification du DOM :

Ce sont ces différents points qui seront évoqués dans ce chapitre.

Compléter le contenu d'un noeud

Vous savez déjà remplacer le contenu d'un noeud ; il suffit d'utiliser les méthodes text() et html() déjà évoquées.
Je rappelle qu'avec la méthode html() l'argument de la méthode peut comprendre des balises HTML.

Maintenant si vous voulez insérer du texte avant ou après le contenu actuel il faut utiliser d'autres méthodes.
Introduisons ces méthodes avec un exemple !
En cliquant sur un bouton de commande du texte est ajouté avant et après le contenu actuel des titres H1 et H2.

Le code HTML de l'exemple

Le script de l'exemple

Commentaire

Pour les titres de niveau 1 et 2 emploi des méthodes prepend() (ajout de contenu en début) et append() (ajout de contenu à la fin). Notez qu'à la fin on ajoute une flèche (orientée vers le bas) grâce à une entité de caractère.
Testez !

Se déplacer dans le DOM avec Jquery

Autant en JS traditionnel le déplacement à l'intérieur du DOM du document est délicat. Autant c'est d'une facilité déconcertante avec JQuery. Je présente avec un exemple les principales méthodes pour se "promener" dans le DOM.

Le code CSS et HTML de l'exemple (extraits)

Un tableau, une liste à puces, une liste numérotée, une boîte avec trois paragraphes, un bouton de commande.

Le script de l'exemple


Testez ce code !

Ajouter / supprimer des noeuds

Au travers d'un nouvel exemple je vais maintenant vous montrer qu'il est facile avec jQuery d'ajouter ou de supprimer des éléments dans la page.

Le code HTML de l'exemple (extraits)

La page contient une liste à puces, une liste numérotée, une boîte contenant trois paragraphes, cinq boutons de commande.

Le script

Notez bien la syntaxe pour les méthodes insertAfter et insertBefore :
$("code HTML ajouté").insertAfter/insertBefore($("point d'insertion"))
Notez que les méthodes remove() et empty() n'ont pas besoin d'arguments.

Testez ce code

Ajoutez des items aux listes puis supprimez ces dernières et d'autres éléments de la page.
Pour testez le code n'hésitez pas à recharger la page afin qu'elle retrouve son état initial.
A vous de jouer !
Retour menu