Ein Array anzeigen

Echte Apps halten ihre Daten meistens in einem Array, und die Seite zeigt an, was im Array steht. Es ist dieselbe Idee wie beim Zähler: Die Zahl lebte in einer Variable, und die Seite zeigte sie nur an. Hier leben die Einträge in einem Array, und eine Funktion zeichnet sie auf die Seite:

const obst = ["Apfel", "Birne"];
const obstListe = document.querySelector("#obst");

function zeigeObst() {
    obstListe.textContent = "";
    for (const frucht of obst) {
        const eintrag = document.createElement("li");
        eintrag.textContent = frucht;
        obstListe.append(eintrag);
    }
}

zeigeObst();

Die Funktion leert zuerst die Liste: Wenn du textContent auf einen leeren Text setzt, wird alles im Element entfernt. Dann erstellt die Schleife für jedes Element des Arrays ein li. Immer wenn sich das Array ändert, rufe die Funktion noch einmal auf, um die Liste neu zu zeichnen:

obst.push("Banane");
zeigeObst();

Warum die Liste zuerst leeren? Ohne das würde jeder Aufruf alle Einträge noch einmal unter den schon vorhandenen hinzufügen, und die Seite würde Apfel, Birne, Apfel, Birne, Banane anzeigen.

Und warum das Array, wenn du die Einträge auch direkt an die Seite anhängen könntest? Weil die Daten dann in deinem Programm bleiben, wo du mit ihnen arbeiten kannst: die Einträge mit .length zählen, mit .includes() prüfen, ob ein Eintrag vorhanden ist, oder Preise in einer Schleife addieren. Das Array kann auch Objekte enthalten; der Text jedes Eintrags wird dann aus ihren Eigenschaften gebildet, zum Beispiel `${produkt.name}: ${produkt.preis}`.