Jquery et le DOM

Modifier 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 un script est exécuté qui ajoute du texte devant et après le contenu actuel des titres H1 et H2.

Le code HTML de l'exemple

<h1>1 - Titre général de la page</h1> <p>Corps de texte associé. <br>Blabla ... <h2>1 - Premier sous titre</h2> <p>Corps de texte associé. <br>Blabla ... <h2>2 - Deuxième sous titre</h3> <p>Corps de texte associé. <br>Blabla ... <button>Précisez le niveau hiérarchique des titres</button>

Le script de l'exemple

$("button").click(function() { $("h1").prepend("Chapitre ").append("&darr;"); $("h2").prepend("Section ").append("&darr;"); } );

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 promener dans le DOM avec Jquery

Autant en JS traditionnel le déplacement à l'intérieur du DOM du document est délicate. 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)

<style> table {width :80% ; } div {border :1px solid red;} ... <body> ... <table> <tr><th>col 1</th><th>col 2</th><th>col 3</th></tr> <tr><td >5</td><td>fois 1</td><td>donne 5</td></tr> <tr><td >5</td><td >fois 2</td><td >donne 10</td></tr> <tr><td >5</td><td >fois 3</td><td >donne 15</td></tr> <tr><td >5</td><td >fois 4</td><td >donne 20</td></tr> <tr><td >5</td><td >fois 5</td><td >donne 25</td></tr> </table> <ul>Liste à puces : <li>item 1<li>item 2<li>item 3<li>item 4<li>item 5 </ul> <ol>Liste numérotée : <li>item 1<li>item 2<li>item 3<li>item 4<li>item 5 </ol> <div> <p>Premier paragraphe de la boîte <p>Deuxième paragraphe de la boîte <p>Troisième paragraphe de la boîte </div> <button>Mettre en gras le texte des balises P</button>

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

$("td").mouseover(function() {$(this).next().css("background","green");$(this).prev().css("background","red");}); $("td").mouseout(function() {$(this).next().css("background","");$(this).prev().css("background","");}); $("li").click(function() {$(this).prevAll().css("color","red");$(this).nextAll().css("color","green");}); $("li").mouseover(function() {$(this).prevAll().css("color","");$(this).nextAll().css("color","");}); $("ol,ul").click(function() {$(this).children().css("fontWeight","bold");}); $("ol,ul").mouseout(function() {$(this).children().css("fontWeight","");}); $("div p ").click(function() {$(this).parent().css("background","purple");}); $("div p ").mouseout(function() {$(this).parent().css("background","");}); $("button:eq(0)").click(function() {$("body").find("p").css("fontWeight","bold");});

Commentaire du script


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 CSS & HTML de l'exemple (extraits)

... <style> table {width :500px ; } div {background : pink ; min-height : 100px; } ... <body> ... <ul>Liste à puces : <li>item 1 <li>item 2 <li>item 3 <li>item 4 <li>item 5 </ul> <ol>Liste numérotée : <li>item 1 <li>item 2 <li>item 3 <li>item 4 <li>item 5 </ol> <div> <p>Premier paragraphe de la boîte <p>Deuxième paragraphe de la boîte <p>Troisième paragraphe de la boîte </div> <button>Ajouter un item en fin de liste numérotée !</button> <button>Ajouter un item en début de liste à puces !</button> <button>Supprimer les paragraphes de la boîte rose !</button> <button>Supprimer la liste à puces !</button> <button>Supprimer la liste numérotée !</button>

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

Le script

$("button:eq(0)").click(function() {$("<li>item - fin</li>").insertAfter($('ol li:last'));}); $("button:eq(1)").click(function() {$("<li>item - début</li>").insertBefore($('ul li:first'));}); $("button:eq(2)").click(function() {$("div p").remove() ; }); $("button:eq(3)").click(function() {$("ul").empty() ; }); $("button:eq(4)").click(function() {$("ol").empty() ; });

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 le 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