HTMLCSSJavaScriptIndexRoadmap

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

  • Anna
  • Ben
  • 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

Anna28
Ben34

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

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

Kurs HTML

29 €

Kurs CSS

39 €

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

Im nächsten Kapitel lernst du: Formulare mit JavaScript