Ajout exemple 'ajout d'élément par .prepend() et .prependTo()'

exemples/jquery/insertion-append-et-appendto/example.html

@@ -1,4 +1,4 @@
 <!-- Insertion : append et appendTo -->
-<div id="cible">
+<div id="exemple-append">
   <p>1er paragraphe</p>
 </div>

exemples/jquery/insertion-append-et-appendto/script.js

@@ -1,13 +1,13 @@
 // Insertion : append et appendTo
 
 // Si on ne souhaite rien faire sur le nouvel élément pour l' instant
-$('#cible').append('<p>2ème paragraphe</p>');
-$('<p>3ème paragraphe</p>').appendTo('#cible');
+$('#exemple-append').append('<p>2ème paragraphe</p>');
+$('<p>3ème paragraphe</p>').appendTo('#exemple-append');
 
 // Si on souhaite au contraire le manipuler directement
 // a) manipulation directe
-$('<p>4ème paragraphe</p>').appendTo('#cible').css('color', '#67bdba');
+$('<p>4ème paragraphe</p>').appendTo('#exemple-append').css('color', '#67bdba');
 // b) stockage dans une variable et manipulation, pratique si on veut
 //    garder cette variable pour agir dessus plus tard
-var p = $('<p>5ème paragraphe</p>').appendTo('#cible');
+var p = $('<p>5ème paragraphe</p>').appendTo('#exemple-append');
 p.css({ color: '#eae', backgroundColor: '#333', padding: '5px', borderRadius: '5px' });

exemples/jquery/insertion-prepend-et-prependto/config.json

@@ -0,0 +1,10 @@
+{
+  "slug": "insertion-prepend-et-prependto",
+  "title": "Insertion : prepend et prependTo",
+  "category": "misc",
+  "html": [ "example.html" ],
+  "js": [ "script.js" ],
+  "css": [],
+  "libsJs": [ "jquery-3.2.1.min.js" ],
+  "libsCss": [ "styles.css" ]
+}

exemples/jquery/insertion-prepend-et-prependto/example.html

@@ -0,0 +1,8 @@
+<!-- Insertion : prepend et prependTo -->
+<h3>Exemple avec une liste numérotée</h3>
+<p>Comme on utilise <code>.prepend()</code> et <code>.prependTo()</code>, chaque élément ajouté se
+retrouve au tout début de la liste, et prend le numéro 1, tandis que
+les précédents éléments "reculent" dans la liste à chaque nouvel ajout.</p>
+<ol id="exemple-prepend">
+  <li><strong>L'élément initial</strong>, numéroté 5 à la fin</li>
+</ol>

exemples/jquery/insertion-prepend-et-prependto/script.js

@@ -0,0 +1,18 @@
+// Insertion : prepend et prependTo
+
+// Si on ne souhaite rien faire sur le nouvel élément pour l' instant
+$('#exemple-prepend').prepend(
+    '<li>Le premier élément ajouté (par .prepend), numéroté 4 à la fin</li>'
+);
+$('<li>Le deuxième élément ajouté (par .prependTo), numéroté 3 à la fin</li>')
+.prependTo('#exemple-prepend');
+
+// Si on souhaite au contraire le manipuler directement
+// a) manipulation directe
+$('<li>Le troisième élément ajouté, numéroté 2 à la fin</li>')
+.prependTo('#exemple-prepend').css('color', '#67bdba');
+// b) stockage dans une variable et manipulation, pratique si on veut
+//    garder cette variable pour agir dessus plus tard
+var p = $('<li>Le quatrième élément ajouté, numéroté 1 à la fin</li>')
+.prependTo('#exemple-prepend');
+p.css({ color: '#eae', backgroundColor: '#333', padding: '5px', borderRadius: '5px' });