Chargement...

Créer des éléments

Sur le liège de la cuisine, un papier est déjà épinglé : milk. La liste, c’est #board. Ce papier est un li dont l’id est milk. Le balisage tient sur une ligne, donc pas de nœud texte vide venu d’un saut de ligne.
Tu veux ajouter tea, bread et eggs. Ne fabrique pas la balise avec une chaîne. document.createElement("li") te donne un li neuf qui n’est pas encore dans le document. parentElement vaut null. document.body.contains vaut false. board.children.length reste 1, parce qu’il n’y a que milk.
textContent = "tea" écrit le mot sur cet objet. Ça ne l’accroche pas à la page.
board.append(tea) le met en dernier. Le résultat de l’appel est undefined. Il ne te rend pas le nœud. appendChild rend ce nœud ; cette page utilise append. prepend place le pain en premier. insertBefore(eggs, milk) place les œufs juste avant milk, et milk est déjà un enfant du tableau. L’ordre devient bread, eggs, milk, tea. children.length passe à 4.
Un essai à part, seulement sur le tableau d’origine : createTextNode("salt"). C’est un nœud texte, pas un li. Si tu l’ajoutes, children.length reste 1. childNodes.length passe de 1 à 2. nodeType vaut 3. Le dernier élément reste milk. La démo de la page n’ajoute pas le sel.
La ligne sous le tableau dit bread / eggs / milk / 4. tea est dans la liste, pas dans cette ligne. Le 4 est le nombre d’éléments. Le texte milk reste milk. Tu ne règles aucune propriété CSS ici.

Des nœuds neufs, pas une couche de peinture

La page d’avant a écrit style, setProperty, classList et cssText sur une pastille de peinture. Elle n’a créé aucun nœud. Celle d’encore avant changeait les mots avec textContent, innerHTML et insertAdjacentHTML. Ici tu n’assignes pas style, tu n’analyses pas une chaîne HTML, et tu ne réécris pas le mot milk. getElementById te donne seulement le tableau et la note milk. Les nouvelles lignes viennent de createElement.

Où se pose chaque nœud neuf

Le tableau commence par un li : milk. Lis les rangées dans l’ordre. La rangée du sel est un essai sur ce tableau d’origine, avant tea, bread et eggs. La démo s’arrête à insertBefore et n’ajoute pas le sel.

📊 Où se pose chaque nœud neuf

Appel	Où se pose le nœud	Enfants éléments	Confusion facile
`createElement("li")`	nulle part ; `parentElement` est `null`	toujours 1, milk	croire que la note est déjà au tableau
`textContent = "tea"`	toujours nulle part	toujours 1	croire que le mot insère un `li`
`append(tea)`	en dernier ; le résultat est `undefined`	2 : milk, puis tea	attendre que `append` rende le nœud
`prepend(bread)`	en premier	3 : bread, milk, tea	échanger `prepend` et `append`
`insertBefore(eggs, milk)`	juste avant milk	4 : bread, eggs, milk, tea	une référence qui n’est pas enfant du tableau
`append(createTextNode("salt"))` sur le tableau neuf	nœud texte après milk, pas un `li`	toujours 1	voir `children.length` passer à 2

createElement construit le nœud en mémoire. Le tableau ne change pas tant qu’une méthode ne le place pas. children compte seulement les enfants éléments. Un nœud texte est dans childNodes, pas dans children. append et prepend donnent undefined. appendChild rend le nœud que tu passes. append accepte un nœud ou une chaîne ; une chaîne devient un nœud texte. appendChild accepte un nœud, et une chaîne lève une erreur. insertBefore veut une référence qui est déjà enfant de ce parent. Si tu passes null, le nœud va à la fin, la même idée qu’append. Cette page passe milk, pas null. Ajouter un nœud déjà présent sur le tableau le déplace. Ça ne le copie pas.

Le nouveau li n’est pas encore au tableau

Le fichier s’ouvre sur la liste d’une ligne. Rien n’est créé. Les quatre lectures interrogent le nœud neuf et le tableau, avant le texte et avant de l’accrocher.

Note détachée

javascript

let board = document.getElementById("board");
let tea = document.createElement("li");
console.log(tea.parentElement);
console.log(document.body.contains(tea));
console.log(board.children.length);
console.log(tea.textContent);

Les sorties sont null, false, 1 et une chaîne vide. Le navigateur a un vrai objet li. Il n’a pas de parent. Le seul enfant élément reste milk. Le mot milk appartient à cette ancienne note, pas à la nouvelle.

Le mot tea ne l’insère pas encore

textContent remplace le texte du nœud que tu tiens déjà. Ce n’est pas une méthode d’insertion. La liste des enfants du tableau ne grandit pas.

Texte, encore détaché

javascript

let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
console.log(tea.textContent);
console.log(document.body.contains(tea));
console.log(board.children.length);

Les sorties sont tea, false et 1. Tu lis le mot sur l’objet. La page montre encore seulement milk. contains vaut false parce que le nœud n’est pas sous le document.

append met le thé en dernier

append ajoute le nœud comme dernier enfant. La variable fromAppend garde le résultat de l’appel, qui est undefined, pas le li. Après l’appel, le parent est le tableau et le texte du dernier élément est tea. L’ordre est milk, puis tea.

Ajouter le thé

javascript

let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
let fromAppend = board.append(tea);
console.log(fromAppend);
console.log(tea.parentElement === board);
console.log(board.lastElementChild.textContent);
console.log(board.children.length);

Les sorties sont undefined, true, tea et 2. appendChild(tea) aurait montré ce même nœud. Ce fragment n’appelle pas appendChild. milk reste le premier enfant élément.

prepend et insertBefore fixent l’ordre

Ce fragment repart du tableau d’origine, puis place trois fois. prepend tourne alors que tea est déjà dernier, donc bread devient le premier enfant. insertBefore(eggs, milk) prend milk comme référence, donc eggs se place entre bread et milk. Les quatre textes sont bread, eggs, milk, tea.

Placer pain et œufs

javascript

let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
console.log(board.children[0].textContent);
console.log(board.children[1].textContent);
console.log(board.children[2].textContent);
console.log(board.children[3].textContent);

Les sorties sont bread, eggs, milk et tea. children.length vaut 4. L’index 1 est eggs, pas milk. milk passe de l’index 0 à l’index 2 parce que deux notes sont devant. Le texte de milk reste le mot milk.

Un nœud texte n’entre pas dans children

Lance ce bloc sur le tableau neuf, la liste d’origine sur une ligne, pas après le script de la page. createTextNode construit un nœud texte. nodeType 3 veut dire texte. nodeType 1 voudrait dire élément. children l’ignore, donc la longueur reste 1. childNodes le compte, donc cette longueur passe de 1 à 2. Le dernier élément reste la note milk. Tu peux voir le mot salt dans la liste, et ce n’est toujours pas un li.

Nœud texte sel

javascript

let board = document.getElementById("board");
let salt = document.createTextNode("salt");
board.append(salt);
console.log(salt.nodeType);
console.log(board.children.length);
console.log(board.childNodes.length);
console.log(board.lastElementChild.id);

Les sorties sont 3, 1, 2 et milk. Une chaîne passée à append, par exemple board.append("salt"), devient aussi un nœud texte. Pas un li. La démo plus bas ne contient pas cette ligne.

Une ligne sous le tableau

Le script est à la fin de body, une fois la liste en place. Il ajoute tea, place bread devant et insère eggs avant milk. Il ne crée pas salt. Il écrit l’index 0, l’index 1, l’index 2 et le nombre d’éléments. Il n’écrit pas le quatrième texte, tea.

Démo de la page — tableau

html

<!DOCTYPE html>
<html>
<head>
<title>create elements — page</title>
</head>
<body>
<ul id="board"><li id="milk">milk</li></ul>
<p id="line">…</p>
<script>
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
document.getElementById("line").textContent =
board.children[0].textContent + " / " +
board.children[1].textContent + " / " +
board.children[2].textContent + " / " +
board.children.length;
</script>
</body>
</html>

La ligne affiche bread / eggs / milk / 4. La liste elle-même est bread, eggs, milk, tea. La ligne s’arrête au troisième item puis donne la longueur, donc tea n’est pas le dernier morceau et le dernier morceau n’est pas un mot. salt est absent. Le texte de la note milk reste milk. La page suivante parle des événements. Elle n’ajoute pas une autre façon de construire ces nœuds.

Vérifie le tableau

Crée le li et lis parentElement, document.body.contains, children.length et textContent. Les valeurs sont null, false, 1 et une chaîne vide.
Mets le texte à tea et lis le texte, contains et la longueur. Les valeurs sont tea, false et 1.
Ajoute tea et lis le résultat de l’appel, si le parent est le tableau, le texte du dernier élément et la longueur. Les valeurs sont undefined, true, tea et 2. Puis lance le fragment d’ordre et lis bread, eggs, milk, tea.
Sur le tableau neuf, ajoute le nœud texte sel et lis nodeType, children.length, childNodes.length et l’id du dernier élément. Les valeurs sont 3, 1, 2 et milk. La ligne de la page : bread / eggs / milk / 4.

Ratés sur ce tableau

La liste s’ouvre encore sur milk. L’appel était le mauvais genre d’insertion.

Croire que createElement("li") montre tea sur le tableau tout de suite
Croire que textContent = "tea" augmente children.length
Croire que append rend le li ; c’est appendChild qui le fait
Passer une chaîne à appendChild ; la chaîne va à append, où elle devient un nœud texte
Appeler insertBefore avec une référence qui n’est pas enfant du tableau
Compter le nœud texte sel dans children
Construire la nouvelle ligne avec innerHTML ; la page qui change le HTML analysait le balisage
Régler style.color ici ; la page précédente écrivait le CSS
Lire la ligne comme bread / eggs / milk / tea
Appeler remove ou cloneNode ici ; cette page ajoute seulement les trois notes

Emporte ceci

createElement("li") construit une note détachée : parentElement est null et children.length reste 1
textContent = "tea" écrit le mot et laisse le nœud hors du tableau
append(tea) met tea en dernier, et le résultat de l’appel est undefined
prepend(bread) et insertBefore(eggs, milk) donnent l’ordre bread, eggs, milk, tea
createTextNode("salt") sur le tableau neuf laisse children.length à 1 et nodeType à 3
La ligne affiche bread / eggs / milk / 4, et le texte milk reste milk

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓

Questions

🎯

70%

Pour Réussir

♾️

∞

Temps

🔄

∞

Tentatives

📝 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

Créer des éléments

Des nœuds neufs, pas une couche de peinture

Où se pose chaque nœud neuf

📊 Où se pose chaque nœud neuf

Le nouveau li n’est pas encore au tableau

Note détachée

Le mot tea ne l’insère pas encore

Texte, encore détaché

append met le thé en dernier

Ajouter le thé

prepend et insertBefore fixent l’ordre

Placer pain et œufs

Un nœud texte n’entre pas dans children

Nœud texte sel

Une ligne sous le tableau

Démo de la page — tableau

Vérifie le tableau

Ratés sur ce tableau

Emporte ceci

🧠 Testez Vos Connaissances

Testez Vos Connaissances

📝 Instructions

🚧 Cours Bientôt Disponible

Course Name

Être Notifié Quand Disponible

Disponible Maintenant

Coming Soon

Course Name