Elemente erstellen

Bisher hast du Elemente geändert, die schon in der index.html standen. JavaScript kann auch neue erstellen. Listen sind ein gutes Beispiel. In HTML ist eine Liste das Element ul, und jeder Eintrag ist ein Element li darin:

<ul id="obst">
    <li>Apfel</li>
    <li>Birne</li>
</ul>

Einen Eintrag hinzuzufügen geht in drei Schritten:

const obstListe = document.querySelector("#obst");

const eintrag = document.createElement("li");
eintrag.textContent = "Banane";
obstListe.append(eintrag);

1. document.createElement("li") erstellt ein neues Element li. Bisher gibt es es nur im Programm; auf der Seite ist es noch nicht.
2. textContent setzt seinen Text.
3. obstListe.append(eintrag) setzt das Element ans Ende der Liste. Erst jetzt erscheint es auf der Seite.

Die Liste hat jetzt drei Einträge: Apfel, Birne und Banane. Ein typischer Fehler ist, den letzten Schritt zu vergessen: Das Element ist erstellt, aber niemand setzt es in die Seite, also kannst du es nicht sehen.

Jeder neue Eintrag braucht sein eigenes createElement(). Ein Element kann nur einmal auf der Seite sein: Wenn du dasselbe Element noch einmal mit append() einfügst, bekommst du keine Kopie; das Element wandert nur ans Ende. Wenn ein Button also bei jedem Klick einen neuen Eintrag hinzufügen soll, erstelle das Element im Handler.

Im Internet siehst du oft innerHTML, um Inhalt in ein Element zu setzen. Benutze es nicht mit Text, den der Nutzer getippt hat: Es liest den Text als HTML, sodass der Text die Seite kaputt machen oder sogar Code ausführen könnte, den jemand eingeschleust hat. createElement() und textContent zeigen Text immer ausschließlich als Text an.