Renommage Modifier / Construire HTML

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

@@ -0,0 +1,26 @@
+Après avoir vu comment **ajouter** du contenu à la page, voyons comment **modifier**
+du contenu existant.
+
+```html
+<p id="polemique">Star Wars VIII est le <strong>meilleur Star Wars</strong> !</p>
+<script>
+var paragraphe = document.getElementById('polemique');
+paragraphe.innerHTML = 'Star Wars VIII... Mouais, <em>bof bof</em> !';
+</script>
+```
+
+<blockquote>
+Chaque <em>élément</em> du document a une propriété <code>innerHTML</code>,
+qui renferme son contenu HTML.
+</blockquote>
+
+Première remarque, cette propriété ne concerne donc pas les noeuds texte.
+
+Deuxième remarque, comme son nom semble l'indiquer, on peut mettre un mélange de texte et de balises dans cette propriété. Cela a des implications <em>très</em> intéressantes,
+concernant la création de contenu HTML.
+
+Imagine la tâche que représenterait la création d'une interface complexe, de façon dynamique,
+en utilisant uniquement des `createElement()`, `createTextNode()` et `appendChild()`...
+Même en améliorant la fonction de création de contenu de l'exercice, on ne serait pas sorti de l'auberge !
+
+C'est probablement une meilleure idée d'assigner directement une chaîne de contenu HTML à `innerHTML`, comme on va le faire à l'étape suivante.

react-tuto/src/markdown/2. L'API DOM/09. Construire du HTML.md

@@ -0,0 +1,18 @@
+Voici une autre façon de construire notre liste d'ingrédients du quatre-quarts,
+basées sur l'utilisation de `innerHTML`.
+
+* On part d'une chaîne vide (`listeHtml`), qu'on va remplir en utilisant une boucle.
+* On remplace le contenu existant (vide ici) par cette nouvelle chaîne.
+
+```html
+<ul id="ingredients"></ul>
+<script>
+var ingredients = ['Farine', 'Oeufs', 'Beurre', 'Sucre'];
+var listeHtml = '';
+for(var i = 0 ; i < ingredients.length ; i++) {
+  listeHtml += '<li>' + ingredients[i] + '</li>';
+}
+var listeElem = document.getElementById('ingredients');
+listeElem.innerHTML = listeHtml;
+</script>
+```

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

@@ -1,17 +0,0 @@
-Ajoute ceci au contenu de `empty.html`, puis recharge :
-
-```html
-<div id="contenu"></div>
-<script>
-var divContenu = document.getElementById('contenu');
-divContenu.innerHTML = 'Contenu ajouté avec JavaScript';
-</script>
-```
-
-Dans l'exemple précédent, `getElementsByTagName()` nous permettait d'obtenir
-tous les éléments correspondant à une balise.
-
-<blockquote>Ici on utilise <code>getElementById()</code> pour récupérer un élément, via l'attribut <code>id</code> spécifié
-dans sa balise ouvrante.
-On manipule ensuite son contenu, en assignant une valeur à la propriété <code>innerHTML</code>.
-</blockquote>

react-tuto/src/markdown/2. L'API DOM/24. Construire du HTML.md

@@ -1,17 +0,0 @@
-On va effectuer des manipulations plus complexes !
-
-```html
-<ul id="liste"></ul>
-<script>
-var listeElem = document.getElementById('liste');
-var personnes = ['Jack', 'Rose'];
-var listeHtml = '';
-for(var p = 0 ; p < personnes.length ; p++) {
-  listeHtml += '<li>' + personnes[p] + '</li>';
-}
-listeElem.innerHTML = listeHtml;
-</script>
-```
-
-Ici on part d'une chaîne vide, et on la remplit en bouclant sur la liste de personnes.
-On ajoute le tout à la liste `ul` récupérée via `getElementById()`.