Lädt...

HTML ändern

Ein Fährzettel steht schon auf der Seite: das Boot heißt Gull, die Zeit ist 09:10, der Hinweis sagt Boarding. HTML ändern heißt, neuen Inhalt in ein Element zu schreiben, das du schon hast. boat.textContent = "Heron" speichert die Wörter Heron. note.textContent = "<em>Late</em>" zeigt diese Zeichen, und note.querySelector("em") ist null. note.innerHTML = "<em>Late</em>" baut ein em, dessen Text Late ist. Danach ist note.textContent gleich Late, während note.innerHTML die Tags noch enthält. Ein zweites Schreiben, note.innerHTML = "Dock 2", löscht das em. note.insertAdjacentHTML("beforeend", " <span>gate B</span>") behält Dock 2 und hängt gate B an, der Hinweis lautet also Dock 2 gate B. Der Zeit wird nichts zugewiesen, also bleibt sie 09:10.

Schreiben, keine neue Suche

Die vorige Seite hat Wege verglichen, einen Knoten zu finden. Diese Seite zählt keine Sammlung, liest keinen Index und geht nicht über parentElement. getElementById gibt dir nur den Zettel. Die Lektion ist der Wert, den du zuweist.

Was jede Zuweisung auf dem Hinweis lässt

Der Hinweis beginnt als Boarding. Lies die Zeilen der Reihe nach. Jede Zuweisung ersetzt den Hinweis oder verlängert ihn.

📊 Was jede Zuweisung auf dem Hinweis lässt

Schreiben Was du siehst Was bleibt Leicht verwechselt
textContent = "Heron" am Boot Heron ein Textknoten ein Element namens Heron
textContent = "<em>Late</em>" die Zeichen <em>Late</em> kein em-Element ein echtes em
innerHTML = "<em>Late</em>" Late ein em Tags noch in textContent
innerHTML = "Dock 2" Dock 2 das em ist weg das em neben Dock 2
insertAdjacentHTML("beforeend", " <span>gate B</span>") Dock 2 gate B Dock 2 plus ein span innerHTML, das Dock 2 verwirft

textContent speichert eine Zeichenkette und liest keine Tags. innerHTML liest Tags und wirft jedes Kind weg, das das Element schon hatte. insertAdjacentHTML liest Tags ebenfalls, aber beforeend setzt die neuen Knoten hinter den bisherigen Inhalt. Ein Bootsname vom Schalter gehört in textContent. Dieselbe Zeichenkette in innerHTML würde ein Kleiner-als-Zeichen als Markup nehmen.

Lies den Zettel, bevor du schreibst

Die Datei öffnet mit drei Werten. Noch ist nichts zugewiesen.

Zettel lesen

javascript 
console.log(document.getElementById("boat").textContent);
console.log(document.getElementById("when").textContent);
console.log(document.getElementById("note").textContent);

Die Ausgaben sind Gull, 09:10 und Boarding. Die Zeit ist ein eigener Absatz. Spätere Zuweisungen fassen when nicht an.

Wörter bleiben Wörter

textContent ersetzt jedes Kind durch einen Textknoten. Zeichen, die wie ein Tag aussehen, bleiben Zeichen.

Nur Wörter

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

Die erste Zeile ist Heron. Die zweite sind die Zeichen <em>Late</em>. Die dritte ist null. Der Hinweis zeigt das Tag als Text und hat kein Element gebaut.

innerHTML baut das Element

Gib dieselben Zeichen an innerHTML. Der Parser macht Knoten daraus und ersetzt, was der Hinweis hielt.

Gelesenes Markup

javascript 
let note = document.getElementById("note");
note.innerHTML = "<em>Late</em>";
console.log(note.textContent);
console.log(note.innerHTML);
console.log(note.querySelector("em") === null);

Die erste Zeile ist Late. Die zweite ist <em>Late</em>, weil innerHTML das Markup samt Tags zurückgibt. Die dritte ist false: das em ist da, also nicht null. Sichtbare Wörter und die Markup-Zeichenkette sind zwei Lesarten desselben Elements.

Das nächste innerHTML löscht das em

Ein neuer innerHTML-Wert ersetzt den ganzen Hinweis. Das em bleibt nicht neben dem neuen Text.

Erneut ersetzen

javascript 
let note = document.getElementById("note");
note.innerHTML = "Dock 2";
console.log(note.textContent);
console.log(note.querySelector("em"));

Die erste Zeile ist Dock 2. Die zweite ist null. Boarding war schon weg. Dieses Schreiben nimmt auch das em mit.

gate B anhängen und Dock 2 behalten

insertAdjacentHTML("beforeend", ...) liest ein Fragment und setzt es ans Ende. Diese Zeichenkette beginnt mit einem Leerzeichen, damit die beiden Teile zwei Wörter bleiben. Andere Positionen gibt es. Diese Seite nutzt nur beforeend.

Am Ende anfügen

javascript 
let note = document.getElementById("note");
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
console.log(note.textContent);
console.log(note.querySelector("span").textContent);

Die erste Zeile ist Dock 2 gate B. Die zweite ist gate B. Dock 2 steht noch im Hinweis. Dieselbe Span-Zeichenkette über innerHTML hätte Dock 2 gelöscht.

Eine Zeile unter dem Zettel

Das Skript steht am Ende von body, nachdem der Zettel da ist. Es merkt sich das Wort Late, bevor Dock 2 das em ersetzt, und schreibt dann eine Zeile aus Bootsname, diesem gemerkten Wort und dem Hinweis nach gate B.

Seitendemo — Fährzettel

html 
<!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>

Die Zeile lautet Heron / Late / Dock 2 gate B. Die Zeit lautet weiter 09:10. Late in der Zeile ist das Wort von vor dem Löschen. Der Hinweis selbst sagt nicht mehr Late. Die nächste Seite ändert CSS an solchen Elementen und führt keine neue Suche ein.

Den Zettel prüfen

  1. Die drei Starttexte ausgeben und Gull, 09:10 und Boarding erwarten
  2. Das Boot auf Heron setzen und den Hinweis auf die em-Zeichen, dann diese Zeichenkette und ein null-em erwarten
  3. innerHTML auf die em-Zeichenkette setzen, dann textContent Late, innerHTML noch mit Tags, und ein em das nicht null ist
  4. innerHTML auf Dock 2 setzen und für em null erwarten
  5. Den span mit beforeend anhängen und Dock 2 gate B erwarten, dann den Span-Text gate B
  6. Die Zeile lesen und Heron / Late / Dock 2 gate B erwarten, die Zeit lesen und 09:10 erwarten

Daneben auf diesem Zettel

Die Seite geht trotzdem auf. Die Zuweisung hat die falsche Art Wert geschrieben.

  • Einen am Schalter getippten Namen in innerHTML legen, wo < zu Markup wird
  • Erwarten, dass textContent = "<em>Late</em>" ein em baut
  • Nach dem em-Schreiben textContent lesen und die Tags in dieser Zeichenkette erwarten
  • innerHTML noch einmal zuweisen und erwarten, dass das em bleibt
  • gate B mit innerHTML anhängen und Dock 2 verlieren
  • Das führende Leerzeichen weglassen, sodass der Hinweis Dock 2gate B lautet
  • Hier style setzen; die nächste Seite ändert CSS
  • Hier createElement rufen; eine spätere Seite baut neue Knoten

Das nimmst du mit

  • textContent schreibt einfachen Text und liest keine Tags
  • innerHTML liest Tags und ersetzt jedes Kind
  • Nach dem em-Schreiben ist textContent Late und innerHTML enthält die Tags noch
  • Ein zweites innerHTML löscht das em
  • insertAdjacentHTML("beforeend", ...) hängt Markup an und behält Dock 2
  • Die Zeit bleibt 09:10, weil ihr nichts zugewiesen wird
  • Die Zeile lautet Heron / Late / Dock 2 gate B

🧠 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 46 von 47
Javascript Tutorial