Lädt...

Elemente erzeugen

An der Korkwand in der Küche steckt schon ein Zettel: milk. Die Liste ist #board. Der Zettel ist ein li mit der id milk. Das Markup steht in einer Zeile, also gibt es keinen leeren Textknoten vom Zeilenumbruch.
Du willst tea, bread und eggs dazu. Bau das Tag nicht aus einem String. document.createElement("li") liefert ein neues li, das noch nicht im Dokument ist. parentElement ist null. document.body.contains ist false. board.children.length bleibt 1, weil nur milk an der Wand hängt.
textContent = "tea" schreibt das Wort auf dieses Objekt. Eingehängt ist es damit noch nicht.
board.append(tea) setzt es ans Ende. Das Ergebnis des Aufrufs ist undefined. Den Knoten gibt append nicht zurück. appendChild gibt denselben Knoten zurück; diese Seite nimmt append. prepend setzt bread an den Anfang. insertBefore(eggs, milk) setzt eggs direkt vor milk, und milk ist schon ein Kind der Wand. Die Reihenfolge ist bread, eggs, milk, tea. children.length wird 4.
Ein Nebenversuch nur an der frischen Wand: createTextNode("salt"). Das ist ein Textknoten, kein li. Hängst du ihn an, bleibt children.length bei 1. childNodes.length geht von 1 auf 2. nodeType ist 3. Das letzte Element ist weiter milk. Die Seitendemo hängt salt nicht an.
Die Zeile unter der Wand lautet bread / eggs / milk / 4. tea steht in der Liste, nicht in dieser Zeile. Die 4 ist die Elementzahl. Der Text milk bleibt milk. Eine CSS-Eigenschaft setzt du hier nicht.

Neue Knoten, kein neuer Anstrich

Die vorige Seite schrieb style, setProperty, classList und cssText auf einen Farbchip. Sie hat keinen Knoten erzeugt. Die Seite davor änderte Wörter mit textContent, innerHTML und insertAdjacentHTML. Hier weist du style nichts zu, du zerlegst keinen HTML-String, und du schreibst das Wort milk nicht um. getElementById gibt dir nur die Wand und den milk-Eintrag. Die neuen Zeilen kommen von createElement.

Wo jeder neue Knoten landet

Die Wand beginnt mit einem li: milk. Lies die Zeilen der Reihe nach. Die salt-Zeile ist ein Nebenversuch an dieser frischen Wand, bevor tea, bread und eggs existieren. Die Seitendemo stoppt bei insertBefore und hängt salt nicht an.

📊 Wo jeder neue Knoten landet

Aufruf Wo der neue Knoten sitzt Elementkinder Leicht verwechselt
createElement("li") nirgends; parentElement ist null weiter 1, milk der Eintrag sei schon an der Wand
textContent = "tea" immer noch nirgends weiter 1 das Wort selbst füge ein li ein
append(tea) zuletzt; Ergebnis ist undefined 2: milk, dann tea append gebe den Knoten zurück
prepend(bread) zuerst 3: bread, milk, tea prepend mit append tauschen
insertBefore(eggs, milk) direkt vor milk 4: bread, eggs, milk, tea eine Referenz, die kein Kind der Wand ist
append(createTextNode("salt")) an der frischen Wand Textknoten nach milk, kein li weiter 1 children.length werde 2

createElement baut den Knoten im Speicher. Die Wand ändert sich erst, wenn eine Methode ihn platziert. children zählt nur Elementkinder. Ein Textknoten steckt in childNodes und nicht in children. append und prepend liefern undefined. appendChild liefert den Knoten, den du übergibst. append nimmt einen Knoten oder einen String; ein String wird ein Textknoten. appendChild nimmt einen Knoten, ein String wirft. insertBefore braucht eine Referenz, die schon Kind dieses Elternteils ist. Übergib null, dann geht der Knoten ans Ende, dieselbe Idee wie append. Diese Seite übergibt milk, nicht null. Hängst du einen Knoten an, der schon an der Wand hängt, wird er verschoben. Kopiert wird er nicht.

Das neue li hängt noch nicht

Die Datei öffnet mit der einzeiligen Liste. Erzeugt ist noch nichts. Die ersten vier Ausgaben fragen den neuen Knoten und die Wand, vor jedem Text und vor jedem Einhängen.

Losgelöster Eintrag

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);

Die Ausgaben sind null, false, 1 und ein leerer String. Der Browser hat ein echtes li-Objekt. Es hat kein Elternteil. Das einzige Elementkind ist weiter milk. Das Wort milk gehört zu diesem alten Eintrag, nicht zum neuen.

Das Wort tea hängt ihn noch nicht ein

textContent ersetzt den Text in dem Knoten, den du schon hältst. Das ist keine Einfügemethode. Die Kindliste der Wand wächst nicht.

Text, noch losgelöst

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);

Die Ausgaben sind tea, false und 1. Du liest das Wort vom Objekt. Die Seite zeigt weiter nur milk. contains ist false, weil der Knoten nicht unter dem Dokument liegt.

append setzt tea ans Ende

append hängt den Knoten als letztes Kind an. Die Variable fromAppend hält das Aufrufergebnis, und das ist undefined, nicht das li. Danach ist parentElement die Wand, und der Text des letzten Elements ist tea. Die Folge ist milk, dann tea.

Tee anhängen

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);

Die Ausgaben sind undefined, true, tea und 2. appendChild(tea) hätte denselben Knoten geloggt. Dieses Stück ruft appendChild nicht auf. milk ist weiter das erste Elementkind.

prepend und insertBefore setzen die Folge

Dieses Stück startet wieder an der Originalwand und platziert dreimal. prepend läuft, nachdem tea schon letzte ist, also wird bread das erste Kind. insertBefore(eggs, milk) nimmt milk als Referenz, also sitzt eggs zwischen bread und milk. Die vier Texte sind bread, eggs, milk, tea.

Brot und Eier setzen

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);

Die Ausgaben sind bread, eggs, milk und tea. children.length ist 4. Index 1 ist eggs, nicht milk. milk rutscht von Index 0 auf Index 2, weil zwei Einträge davor liegen. Der Text von milk ist weiter das Wort milk.

Ein Textknoten kommt nicht in children

Führ diesen Block an der frischen Wand aus, der originalen Einzeilenliste, nicht nach dem Seitenskript. createTextNode baut einen Textknoten. nodeType 3 heißt Text. nodeType 1 hieße Element. children ignoriert ihn, die Länge bleibt 1. childNodes zählt ihn, die Länge geht von 1 auf 2. Das letzte Element ist weiter der milk-Eintrag. Du kannst das Wort salt in der Liste sehen, und es ist trotzdem kein li.

Salz als Textknoten

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);

Die Ausgaben sind 3, 1, 2 und milk. Ein String an append, etwa board.append("salt"), wird ebenfalls ein Textknoten. Kein li. Die Seitendemo weiter unten enthält diese Zeile nicht.

Eine Zeile unter der Wand

Das Skript steht am Ende von body, nachdem die Liste da ist. Es hängt tea an, setzt bread nach vorn und fügt eggs vor milk ein. salt entsteht nicht. Es schreibt Index 0, 1 und 2 und die Elementzahl. Den vierten Text, tea, schreibt es nicht.

Seitendemo — Pinnwand

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>

Die Zeile lautet bread / eggs / milk / 4. Die Liste selbst ist bread, eggs, milk, tea. Die Zeile stoppt beim dritten Eintrag und nennt dann die Länge, also ist tea nicht das letzte Stück und das letzte Stück kein Wort. salt fehlt. Der Text des milk-Eintrags bleibt milk. Die nächste Seite sind Ereignisse. Sie baut diese Knoten nicht noch einmal anders.

Prüf die Wand

  1. Erzeuge das li und lies parentElement, document.body.contains, children.length und textContent. Die Werte sind null, false, 1 und ein leerer String.
  2. Setze den Text auf tea und lies Text, contains und die Länge. Die Werte sind tea, false und 1.
  3. Hänge tea an und lies das Aufrufergebnis, ob der Elternteil die Wand ist, den Text des letzten Elements und die Länge. Die Werte sind undefined, true, tea und 2. Dann führ das Reihenfolge-Stück aus und lies bread, eggs, milk, tea.
  4. An der frischen Wand hänge den salt-Textknoten an und lies nodeType, children.length, childNodes.length und die id des letzten Elements. Die Werte sind 3, 1, 2 und milk. Die Seitenzeile: bread / eggs / milk / 4.

Stolperstellen an dieser Wand

Die Liste öffnet weiter mit milk. Der Aufruf war die falsche Art einzufügen.

  • Erwarten, dass createElement("li") tea sofort an der Wand zeigt
  • Erwarten, dass textContent = "tea" children.length erhöht
  • Erwarten, dass append das li zurückgibt; das tut appendChild
  • Einen String an appendChild geben; ein String gehört zu append und wird dort ein Textknoten
  • insertBefore mit einer Referenz aufrufen, die kein Kind der Wand ist
  • Den salt-Textknoten in children mitzählen
  • Die neue Zeile mit innerHTML bauen; die HTML-ändern-Seite hat Markup zerlegt
  • Hier style.color setzen; die vorige Seite schrieb CSS
  • Die Zeile als bread / eggs / milk / tea lesen
  • Hier remove oder cloneNode aufrufen; diese Seite fügt nur die drei Einträge hinzu

Nimm das mit

  • createElement("li") baut einen losgelösten Eintrag, parentElement ist null und children.length bleibt 1
  • textContent = "tea" schreibt das Wort und lässt den Knoten von der Wand
  • append(tea) setzt tea ans Ende, das Aufrufergebnis ist undefined
  • prepend(bread) und insertBefore(eggs, milk) ergeben die Folge bread, eggs, milk, tea
  • createTextNode("salt") an der frischen Wand lässt children.length bei 1 und meldet nodeType 3
  • Die Zeile lautet bread / eggs / milk / 4, und der Text milk bleibt milk

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 48 von 48
Javascript Tutorial