HTMLCSSJavaScriptIndexRoadmapImpressum

Dynamische Benutzeroberflächen

Mit den DOM-Techniken aus den vorherigen Kapiteln baust du Oberflächen, die sich aus Daten zusammensetzen: Listen, Tabellen, Menüs, Karten und Formularfelder – erzeugt und aktualisiert per JavaScript.

Dynamische Listen erstellen

Aus einem Array erzeugst du Listenpunkte und hängst sie an eine ul oder ol. So bleibt die Ansicht im Sync mit deinen Daten.

Liste aus einem Array

1const namen = ["Anna", "Ben", "Clara"];
2const liste = document.querySelector("ul");
3
4namen.forEach(function(name) {
5    const eintrag = document.createElement("li");
6    eintrag.textContent = name;
7    liste.appendChild(eintrag);
8});

Output

Die Liste enthält die Einträge Anna, Ben und Clara.

Tabellen dynamisch erstellen

Für tabellarische Daten erzeugst du tr- und td-Elemente und fügst sie in den tbody ein – Zeile für Zeile aus deinen Objekten.

Tabellenzeilen erzeugen

1const personen = [
2    { name: "Anna", alter: 28 },
3    { name: "Ben", alter: 34 },
4];
5
6const tbody = document.querySelector("tbody");
7
8personen.forEach(function(person) {
9    const zeile = document.createElement("tr");
10    zeile.innerHTML = "<td>" + person.name + "</td><td>" + person.alter + "</td>";
11    tbody.appendChild(zeile);
12});

Output

Die Tabelle zeigt zwei Zeilen mit Name und Alter.

Navigationslinks lassest du aus einer Datenstruktur entstehen. Ändert sich die Struktur, aktualisierst du nur die Daten – nicht das HTML von Hand.

Navigation aus Daten

1const links = [
2    { text: "Start", href: "/" },
3    { text: "Kurse", href: "/kurse" },
4    { text: "Kontakt", href: "/kontakt" },
5];
6
7const nav = document.querySelector("nav ul");
8
9links.forEach(function(link) {
10    const li = document.createElement("li");
11    const a = document.createElement("a");
12    a.textContent = link.text;
13    a.href = link.href;
14    li.appendChild(a);
15    nav.appendChild(li);
16});

Output

Im Menü erscheinen die Links Start, Kurse und Kontakt.

Karten erzeugen

Produkt- oder Infokarten baust du als article- oder div-Blöcke mit Klasse und Inhalt – ideal für Raster und Übersichten.

Produktkarten

1const produkte = [
2    { titel: "Kurs HTML", preis: "29 €" },
3    { titel: "Kurs CSS", preis: "39 €" },
4];
5
6const container = document.querySelector("#produkte");
7
8produkte.forEach(function(produkt) {
9    const karte = document.createElement("article");
10    karte.className = "karte";
11    karte.innerHTML =
12        "<h3>" + produkt.titel + "</h3>" +
13        "<p>" + produkt.preis + "</p>";
14    container.appendChild(karte);
15});

Output

Im Container erscheinen zwei Karten mit Titel und Preis.

Formulare erweitern

Dynamische UIs bedeuten auch: Felder nach Bedarf hinzufügen – z. B. per Button ein weiteres input anhängen.

Formularfeld hinzufügen

1const button = document.querySelector("#feld-hinzufuegen");
2const formular = document.querySelector("form");
3
4button.addEventListener("click", function() {
5    const feld = document.createElement("input");
6    feld.type = "text";
7    feld.name = "zusatz";
8    feld.placeholder = "Weiteres Feld";
9    formular.appendChild(feld);
10});

Output

Nach dem Klick erscheint ein neues Textfeld im Formular.

Im nächsten Kapitel lernst du: Formulare mit JavaScript