09 – DOM-Manipulation 🌐

🎯 1. Einleitung & W3Schools

In diesem Kapitel hast du gelernt, wie du mit JavaScript den DOM durchsuchst, änderst, erweiterst und sicher manipulierst.

🔗 W3Schools – JavaScript HTML DOM

🧠 2. KI-Prompt-Training

Aufgabe: Formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um zu erklären, wann man .textContent und wann .innerHTML verwendet – und wie man sicher neue Elemente im DOM erstellt.

🛡️ Aufgabe 1: innerHTML vs. textContent – Wann was?

Gegeben ist folgende Aufgabe: Zeige eine Benutzereingabe auf der Webseite an.

// Unsichere Variante
document.getElementById("ausgabe").innerHTML = benutzereingabe;

// Sichere Variante
document.getElementById("ausgabe").textContent = benutzereingabe;

Deine Aufgabe:

1. Erkläre den Unterschied zwischen den beiden Methoden – besonders im Umgang mit HTML-Code.
2. Was passiert, wenn benutzereingabe den Wert "<script>alert('Hack!')</script>" hat?
3. Wann ist innerHTML trotzdem sinnvoll? Gib ein sicheres Anwendungsbeispiel.
4. Formuliere einen Prompt, der eine Funktion erstellt, die sicher Benutzereingaben anzeigt – es sei denn, der Inhalt ist vertrauenswürdig (z. B. aus deinem eigenen Code).

➕ Aufgabe 2: Dynamische Liste – Elemente erstellen und einfügen

Erstelle eine Funktion zeigeListe(elemente), die:

• ein leeres <ul id="liste"></ul> im HTML voraussetzt,
• für jedes Element im Array ein <li> erstellt,
• die Liste im Speicher aufbaut und dann einmalig in den DOM einfügt (Performance!).

Deine Aufgabe:

1. Implementiere die Funktion mit createElement und appendChild.
2. Warum ist es besser, die Elemente im Speicher zu bauen, bevor sie in den DOM eingefügt werden?
3. Was passiert, wenn das Element mit ID liste nicht existiert? Wie kannst du das abfangen?
4. Formuliere einen Prompt, der diese Funktion robust und performant implementiert – mit Fehlerprüfung und effizientem DOM-Zugriff.