Was sind dynamische Elemente?

Dynamische Elemente entstehen oder ändern sich zur Laufzeit per JavaScript – nicht fest im HTML, sondern erst wenn die Seite schon geladen ist.

Definition

Ein dynamisches Element ist ein HTML-Element, das JavaScript zur Laufzeit erzeugt, verändert oder entfernt. Es steht also nicht (oder nicht vollständig) von Anfang an im Quellcode, sondern entsteht durch Code wie createElement, appendChild oder das Ändern von textContent.

Im Gegensatz dazu sind statische Elemente die Tags, die du direkt in der HTML-Datei schreibst und die der Browser beim Laden sofort kennt.

Unterschied zwischen statischen und dynamischen Elementen

Der wichtigste Unterschied: Wann und wie das Element in den DOM kommt.

• Statisch – im HTML geschrieben, beim Laden der Seite vorhanden
• Dynamisch – per JavaScript erzeugt oder geändert, oft erst nach einer Nutzeraktion

1<!-- Statisch: steht fest im HTML -->
2<ul>
3    <li>Aufgabe 1</li>
4    <li>Aufgabe 2</li>
5</ul>

1// Dynamisch: wird mit JavaScript erzeugt
2const liste = document.querySelector("ul");
3const eintrag = document.createElement("li");
4
5eintrag.textContent = "Neue Aufgabe";
6liste.appendChild(eintrag);

Für Events gilt: Statische Elemente kannst du direkt mit addEventListener ansprechen. Dynamisch erzeugte Elemente existieren oft noch nicht, wenn du die Listener setzt – deshalb nutzt man später oft Event Delegation.

Typische Einsatzgebiete

Dynamische Elemente brauchst du zum Beispiel für:

• To-do-Listen – Einträge hinzufügen und löschen
• Suchergebnisse – Treffer nach einer Eingabe anzeigen
• Warenkörbe – Produkte einfügen und aktualisieren
• Chats und Feeds – neue Nachrichten oder Beiträge nachladen
• Formulare – Felder je nach Auswahl ein- und ausblenden
• Modals und Menüs – Overlays erst bei Bedarf erzeugen

In den nächsten Kapiteln lernst du Schritt für Schritt, wie du Elemente erzeugst, ins DOM einfügst, entfernst und Inhalte dynamisch änderst.