Renommage et ajout exo/solution

react-tuto/src/markdown/2. L'API DOM/05. Ajouter un élément.md

@@ -3,13 +3,18 @@ La méthode `document.createElement()` crée un élément, dont le type est indi
 Cet exemple est adapté de la [doc de cette fonction](https://developer.mozilla.org/fr/docs/Web/API/Document/createElement).
 
 ```javascript
-var nouveauDiv = document.createElement("div");
-var nouveauContenu = document.createTextNode("Salutations !");
-nouveauDiv.appendChild(nouveauContenu);
-
-var body = document.body;
-body.appendChild(nouveauDiv);
+function ajouteDiv(texte) {
+  var nouveauDiv = document.createElement("div");
+  var nouveauContenu = document.createTextNode(texte);
+  nouveauDiv.appendChild(nouveauContenu);
+
+  var body = document.body;
+  body.appendChild(nouveauDiv);
+}
+ajouteDiv('Hello World!');
+ajouteDiv('JavaScript rocks!');
 ```
+On a encapsulé le code dans une fonction qui prend en argument un morceau de texte qu'on souhaite insérer.
 
 La première ligne crée un `div` via `document.createElement()`. Mais elle est vide !
 

react-tuto/src/markdown/2. L'API DOM/06. Ajouter un élément - exercice.md

@@ -0,0 +1,14 @@
+On voudrait améliorer notre fonction de création d'un élément, pour la rendre un peu plus générique. Ça va être à toi de jouer !
+
+Voici la "spec" :
+
+* Au lieu d'ajouter le nouvel élément au `body`, on veut permettre de l'ajouter à un élément dont on spécifie l'id.
+* On veut permettre de créer autre chose qu'un `div`.
+
+Comment faire ? Quelques indices :
+* Tu peux reprendre une bonne partie du code de l'exemple précédent, et l'adapter.
+* Tu vas devoir ajouter deux arguments à la fonction.
+* Tu vas devoir te servir de `getElementById()` vue dans la page n°3.
+
+Prend un peu de temps pour y réfléchir (pas trop non plus !)... Ensuite une solution possible
+est donnée à la page suivante.

react-tuto/src/markdown/2. L'API DOM/07. Ajouter un élément - solution.md

@@ -0,0 +1,35 @@
+Voici une solution possible.
+* On a remplacé le `"div"` hardcodé par une variable, qui est passée en argument.
+* Au lieu d'aller chercher le `body`, on récupère l'élément ciblé via son `id`.
+
+```html
+<h4>La recette du quatre-quarts</h4>
+<ul id="ingredients"></ul>
+<h4>Article de fond sur Toulouse</h4>
+<div id="article"></div>
+
+<script>
+function ajouteElement(idCible, balise, texte) {
+  var nouvelElem = document.createElement(balise);
+  var nouveauContenu = document.createTextNode(texte);
+  nouvelElem.appendChild(nouveauContenu);
+
+  var elementCible = document.getElementById(idCible);
+  elementCible.appendChild(nouvelElem);
+}
+// Utilisation de la nouvelle fonction avec différents paramètres
+var ingredients = ['Farine', 'Oeufs', 'Beurre', 'Sucre'];
+for(var i = 0 ; i < ingredients.length ; i++) {
+  ajouteElement('ingredients', 'li', ingredients[i]);
+}
+var paragraphes = [
+  'Toulouse est la 4ème ville de France.',
+  'On y dit CHOCOLATINE et pas "pain au chocolat".'
+];
+// Note que dans cette boucle on ne DOIT PAS re-déclarer i,
+// car elle a déjà déclarée avant
+for(i = 0 ; i < paragraphes.length ; i++) {
+  ajouteElement('article', 'p', paragraphes[i]);
+}
+</script>
+```