Elemente erstellen und entfernen

Mit JavaScript können wir die Webseite dynamisch verändern, indem wir neue HTML-Elemente erstellen, bestehende verändern oder entfernen. Das ermöglicht es uns, interaktive Inhalte zu erzeugen, ohne die Seite neu zu laden.

Neue Elemente erstellen

Um ein neues Element zu erstellen, verwenden wir die Methode createElement():

// Neues div-Element erstellen
const neuesElement = document.createElement("div");

// Neues Textelement erstellen
const neuerText = document.createTextNode("Hallo Welt!");

Elemente anpassen

Nachdem wir ein Element erstellt haben, können wir es anpassen:

// Inhalt setzen
neuesElement.textContent = "Das ist ein neues Element";

// Klassen hinzufügen
neuesElement.classList.add("highlight");

// Attribute setzen
neuesElement.setAttribute("id", "meinElement");
neuesElement.id = "meinElement"; // Alternative Schreibweise

// Styles anpassen
neuesElement.style.color = "blue";
neuesElement.style.fontSize = "18px";

Elemente in die Seite einfügen

Nachdem wir ein Element erstellt und angepasst haben, müssen wir es in die Seite einfügen:

// Element am Ende eines anderen Elements einfügen
document.querySelector("#container").appendChild(neuesElement);

// Element an einer bestimmten Position einfügen
const elternElement = document.querySelector("#container");
const referenzElement = document.querySelector("#referenz");
elternElement.insertBefore(neuesElement, referenzElement);

// Modernere Methoden
elternElement.append(neuesElement); // Am Ende einfügen
elternElement.prepend(neuesElement); // Am Anfang einfügen
referenzElement.before(neuesElement); // Vor einem Element einfügen
referenzElement.after(neuesElement); // Nach einem Element einfügen

HTML-Strings verwenden

Manchmal ist es einfacher, HTML als String zu definieren und einzufügen:

// HTML als String definieren
const htmlInhalt = `
  <div class="neue-karte">
    <h3>Produkttitel</h3>
    <p>Produktbeschreibung</p>
    <button>Kaufen</button>
  </div>
`;

// HTML in die Seite einfügen
document.querySelector("#produkte").innerHTML += htmlInhalt;

Hinweis: Die Verwendung von innerHTML kann bei unkontrollierten Benutzereingaben zu Sicherheitsrisiken führen. Verwenden Sie es nur für vertrauenswürdige Inhalte.

Elemente entfernen

Es gibt mehrere Möglichkeiten, Elemente zu entfernen:

// Ein Element über die Elternreferenz entfernen
const element = document.querySelector("#zuEntfernen");
element.parentNode.removeChild(element);

// Direktes Entfernen (moderne Methode)
element.remove();

// Den Inhalt eines Elements leeren
document.querySelector("#container").innerHTML = "";
document.querySelector("#container").textContent = "";

Klonen von Elementen

Manchmal ist es nützlich, bestehende Elemente zu kopieren:

// Element klonen (ohne Kinder)
const klon = element.cloneNode();

// Element mit allen untergeordneten Elementen klonen
const tieferKlon = element.cloneNode(true);

// Klon in die Seite einfügen
document.querySelector("#ziel").appendChild(tieferKlon);

Praktisches Beispiel: Dynamische Liste

Hier ist ein Beispiel für das Erstellen und Manipulieren einer Liste:

// Liste erstellen
const liste = document.createElement("ul");

// Listenelement hinzufügen
function elementHinzufügen(text) {
    const listenelement = document.createElement("li");
    listenelement.textContent = text;

    // Löschen-Button hinzufügen
    const löschenButton = document.createElement("button");
    löschenButton.textContent = "Löschen";
    löschenButton.classList.add("delete-btn");

    // Event-Listener für den Löschen-Button
    löschenButton.addEventListener("click", function() {
        listenelement.remove();
    });

    // Button zum Listenelement hinzufügen
    listenelement.appendChild(löschenButton);

    // Listenelement zur Liste hinzufügen
    liste.appendChild(listenelement);
}

// Einige Elemente hinzufügen
elementHinzufügen("Äpfel");
elementHinzufügen("Bananen");
elementHinzufügen("Orangen");

// Liste in die Seite einfügen
document.querySelector("#einkaufsliste").appendChild(liste);

Elemente dynamisch aktualisieren

Wir können auch auf Events reagieren, um Elemente dynamisch zu aktualisieren:

// Eingabefeld und Button
const eingabefeld = document.querySelector("#neuerEintrag");
const hinzufügenButton = document.querySelector("#hinzufügen");

// Event-Listener für das Hinzufügen neuer Einträge
hinzufügenButton.addEventListener("click", function() {
    const text = eingabefeld.value.trim();

    if (text !== "") {
        elementHinzufügen(text);
        eingabefeld.value = ""; // Eingabefeld leeren
        eingabefeld.focus(); // Fokus zurück auf Eingabefeld
    }
});

// Enter-Taste abfangen
eingabefeld.addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
        hinzufügenButton.click(); // Button-Klick simulieren
        event.preventDefault(); // Formular-Submit verhindern
    }
});

Übung: To-Do-Liste erstellen

Aufgabe: Einfache To-Do-Liste

Erstellen Sie eine einfache To-Do-Liste mit JavaScript. Verwenden Sie folgende HTML-Struktur:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>To-Do-Liste</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
        }
        #todoForm {
            display: flex;
            margin-bottom: 20px;
        }
        #todoInput {
            flex-grow: 1;
            padding:.5rem;
            font-size: 1rem;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }
        #addBtn {
            padding: .5rem 1rem;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        #todoList {
            list-style-type: none;
            padding: 0;
        }
        .todo-item {
            display: flex;
            align-items: center;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        .todo-item.done {
            text-decoration: line-through;
            opacity: 0.7;
        }
        .todo-text {
            flex-grow: 1;
        }
        .delete-btn {
            padding: 5px 10px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <h1>Meine To-Do-Liste</h1>

    <div id="todoForm">
        <input type="text" id="todoInput" placeholder="Neue Aufgabe hinzufügen...">
        <button id="addBtn">Hinzufügen</button>
    </div>

    <ul id="todoList">
        <!-- Hier werden die Todos dynamisch eingefügt -->
    </ul>

    <script>
        // Hier kommt Ihr JavaScript-Code
    </script>
</body>
</html>

Anforderungen:

1. Wenn der Benutzer eine Aufgabe eingibt und auf “Hinzufügen” klickt oder Enter drückt, soll ein neues To-Do-Element zur Liste hinzugefügt werden

2. Jedes To-Do-Element soll folgende Funktionen haben:

   • Ein Klick auf den Text markiert die Aufgabe als erledigt (durchgestrichen)
   • Ein Klick auf den “Löschen”-Button entfernt die Aufgabe aus der Liste

3. Das Eingabefeld soll nach dem Hinzufügen geleert werden und den Fokus behalten

4. Leere Aufgaben sollen nicht hinzugefügt werden können

Verwenden Sie dafür die Methoden zum Erstellen, Anpassen und Entfernen von Elementen.

Zusammenfassung

• Mit document.createElement() erstellen wir neue HTML-Elemente
• Elemente können über ihre Eigenschaften und Methoden angepasst werden
• Neue Elemente müssen mit Methoden wie appendChild() oder append() in die Seite eingefügt werden
• Mit element.remove() können wir Elemente von der Seite entfernen
• Die innerHTML-Eigenschaft erlaubt das Einfügen von HTML-Strings, sollte jedoch mit Vorsicht verwendet werden
• Durch die dynamische Manipulation des DOM können wir interaktive Webseiten erstellen, ohne die Seite neu zu laden

Im nächsten Kapitel lernen wir, wie wir einfache Animationen mit JavaScript erstellen können.