Modifier le HTML
Un bulletin de ferry est déjà sur la page : le bateau s’appelle Gull, l’heure est 09:10, la note dit Boarding. Modifier le HTML, c’est écrire un contenu nouveau dans un élément que tu tiens déjà. boat.textContent = "Heron" range les mots Heron. note.textContent = "<em>Late</em>" affiche ces caractères, et note.querySelector("em") vaut null. note.innerHTML = "<em>Late</em>" construit un em dont le texte est Late. Ensuite, note.textContent vaut Late, tandis que note.innerHTML contient encore les balises. Une seconde écriture, note.innerHTML = "Dock 2", supprime le em. note.insertAdjacentHTML("beforeend", " <span>gate B</span>") garde Dock 2 et ajoute gate B : la note se lit Dock 2 gate B. Rien n’assigne l’heure, elle reste donc 09:10.
Écrire, pas chercher encore
La page précédente comparait des façons de trouver un nœud. Celle-ci ne compte pas une collection, ne lit pas un index et ne parcourt pas parentElement. getElementById te donne seulement le bulletin. La leçon, c’est la valeur que tu assignes.
Ce que chaque écriture laisse sur la note
La note commence par Boarding. Lis les lignes dans l’ordre. Chaque assignation remplace la note ou la prolonge.
📊 Ce que chaque écriture laisse sur la note
| Écriture | Ce que tu vois | Ce qui reste | Confusion facile |
|---|---|---|---|
textContent = "Heron" sur le bateau |
Heron | un nœud de texte | un élément nommé Heron |
textContent = "<em>Late</em>" |
les caractères <em>Late</em> |
aucun élément em |
un vrai em |
innerHTML = "<em>Late</em>" |
Late | un em |
attendre les balises dans textContent |
innerHTML = "Dock 2" |
Dock 2 | le em a disparu |
le em à côté de Dock 2 |
insertAdjacentHTML("beforeend", " <span>gate B</span>") |
Dock 2 gate B | Dock 2 plus un span |
innerHTML, qui retire Dock 2 |
textContent stocke une chaîne et n’interprète pas les balises. innerHTML interprète les balises et jette chaque enfant que l’élément avait déjà. insertAdjacentHTML interprète aussi les balises, mais beforeend place les nouveaux nœuds après le contenu actuel. Un nom de bateau tapé au guichet va dans textContent. La même chaîne dans innerHTML traiterait un signe inférieur comme du balisage.
Lis le bulletin avant d’écrire
Le fichier s’ouvre sur trois valeurs. Aucune assignation n’a encore eu lieu.
console.log(document.getElementById("boat").textContent);
console.log(document.getElementById("when").textContent);
console.log(document.getElementById("note").textContent);
Les journaux sont Gull, 09:10 et Boarding. L’heure est un paragraphe à part. Les écritures suivantes ne touchent pas when.
Les mots restent des mots
textContent remplace chaque enfant par un nœud de texte. Les caractères qui ressemblent à une balise restent des caractères.
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.textContent = "<em>Late</em>";
console.log(boat.textContent);
console.log(note.textContent);
console.log(note.querySelector("em"));
La première ligne est Heron. La deuxième, ce sont les caractères <em>Late</em>. La troisième est null. La note montre la balise comme du texte. Elle n’a pas construit d’élément.
innerHTML construit l’élément
Donne ces mêmes caractères à innerHTML. L’analyseur en fait des nœuds et remplace ce que la note contenait.
let note = document.getElementById("note");
note.innerHTML = "<em>Late</em>";
console.log(note.textContent);
console.log(note.innerHTML);
console.log(note.querySelector("em") === null);
La première ligne est Late. La deuxième est <em>Late</em>, parce que innerHTML renvoie le balisage, balises comprises. La troisième est false : le em est là, donc il n’est pas null. Les mots visibles et la chaîne de balisage sont deux lectures du même élément.
L’innerHTML suivant efface le em
Une nouvelle valeur innerHTML remplace toute la note. Le em ne reste pas à côté du nouveau texte.
let note = document.getElementById("note");
note.innerHTML = "Dock 2";
console.log(note.textContent);
console.log(note.querySelector("em"));
La première ligne est Dock 2. La deuxième est null. Boarding était déjà parti. Cette écriture emporte aussi le em.
Ajoute gate B et garde Dock 2
insertAdjacentHTML("beforeend", ...) analyse un fragment et le place à la fin. Cette chaîne commence par une espace, pour que les deux bouts restent deux mots. D’autres positions existent. Cette page n’utilise que beforeend.
let note = document.getElementById("note");
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
console.log(note.textContent);
console.log(note.querySelector("span").textContent);
La première ligne est Dock 2 gate B. La deuxième est gate B. Dock 2 est encore dans la note. Assigner la même chaîne de span avec innerHTML aurait effacé Dock 2.
Une ligne sous le bulletin
Le script est à la fin de body, une fois le bulletin présent. Il garde le mot Late avant que Dock 2 remplace le em, puis écrit une ligne avec le bateau, ce mot gardé et la note après l’ajout de gate B.
<!DOCTYPE html>
<html>
<head>
<title>changing html — page</title>
</head>
<body>
<article id="slip">
<h2 id="boat">Gull</h2>
<p id="when">09:10</p>
<p id="note">Boarding</p>
<p id="line">…</p>
</article>
<script>
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.innerHTML = "<em>Late</em>";
let late = note.textContent;
note.innerHTML = "Dock 2";
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
document.getElementById("line").textContent = boat.textContent + " / " + late + " / " + note.textContent;
</script>
</body>
</html>
La ligne se lit Heron / Late / Dock 2 gate B. L’heure se lit encore 09:10. Late sur la ligne est le mot gardé avant l’effacement. La note elle-même ne dit plus Late. La page suivante change le CSS d’éléments comme ceux-ci. Elle n’ajoute pas une autre façon de les trouver.
Vérifie le bulletin
- Affiche les trois textes de départ et attends Gull, 09:10 et Boarding
- Mets le bateau à Heron et la note aux caractères em, puis attends cette chaîne et un em null
- Mets innerHTML à la chaîne em, puis attends textContent Late, innerHTML encore avec les balises, et un em qui n’est pas null
- Mets innerHTML à Dock 2 et attends null pour em
- Ajoute le span avec beforeend et attends Dock 2 gate B, puis le texte du span gate B
- Lis la ligne et attends Heron / Late / Dock 2 gate B, lis l’heure et attends 09:10
Ratés sur ce bulletin
La page s’ouvre quand même. L’assignation a écrit le mauvais type de valeur.
- Mettre dans
innerHTMLun nom tapé au guichet, là où<devient du balisage - Attendre que
textContent = "<em>Late</em>"crée unem - Lire
textContentaprès l’écriture du em et attendre les balises dans cette chaîne - Assigner
innerHTMLencore et attendre que leemreste - Ajouter gate B avec
innerHTMLet perdre Dock 2 - Oublier l’espace du début, si bien que la note se lit
Dock 2gate B - Régler
styleici ; la page suivante change le CSS - Appeler
createElementici ; une page plus loin construit de nouveaux nœuds
Tu repars avec ça
textContentécrit du texte brut et n’interprète pas les balisesinnerHTMLinterprète les balises et remplace chaque enfant- Après l’écriture du em,
textContentvaut Late etinnerHTMLcontient encore les balises - Un second
innerHTMLsupprime leem insertAdjacentHTML("beforeend", ...)ajoute du balisage et garde Dock 2- L’heure reste 09:10 parce que rien ne lui est assigné
- La ligne se lit Heron / Late / Dock 2 gate B
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut