JavaScript Academy · Lektion

Elemente erstellen und einfügen

Erstellen Sie mit createElement und append neue Knoten.

Elemente erstellen und einfügen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Neue Elemente erstellen

Statt HTML-Strings zu schreiben, können Sie Elemente im Code erstellen. Dadurch vermeiden Sie XSS und erhalten eine echte Elementreferenz, die Sie konfigurieren können.

createElement

document.createElement erstellt ein neues, noch nicht eingefügtes Element. Es existiert im Speicher, befindet sich aber noch nicht auf der Seite.

const li = document.createElement("li");
li.textContent = "New item";

Vor dem Einfügen konfigurieren

Legen Sie Klassen, Attribute und Inhalte fest, solange das Element noch vom DOM getrennt ist. Sichtbar wird es erst, wenn Sie es einfügen.

const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";

append

append fügt Knoten (oder Zeichenketten) als letzte untergeordnete Elemente eines Elements hinzu. Die Methode kann mehrere Argumente übernehmen.

const list = document.querySelector("ul");
list.append(li);

prepend

prepend fügt Knoten als erste untergeordnete Elemente ein und verschiebt vorhandene untergeordnete Elemente nach unten.

list.prepend(document.createElement("li"));

append akzeptiert Zeichenketten

Im Gegensatz zum älteren appendChild kann append einfache Zeichenketten und mehrere Argumente auf einmal übernehmen.

const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");

appendChild

appendChild ist die klassische Methode. Sie akzeptiert nur einen Knoten und gibt ihn zurück, während append undefined zurückgibt.

const node = list.appendChild(document.createElement("li"));

insertBefore

insertBefore platziert einen neuen Knoten vor einem bestimmten vorhandenen untergeordneten Element und ermöglicht so eine präzise Positionierung.

const ref = list.children[1];
list.insertBefore(li, ref);

insertAdjacentElement

insertAdjacentElement fügt ein Element relativ zu einem anderen Element ein. Dafür stehen Positionen wie beforebegin, afterbegin, beforeend und afterend zur Verfügung.

ref.insertAdjacentElement("beforebegin", li);

DocumentFragment für Stapelverarbeitung

Wenn Sie viele Elemente hinzufügen, erstellen Sie sie zunächst in einem DocumentFragment und fügen sie anschließend in einem Schritt ein. Das minimiert Reflows und ist schneller.

const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
  const item = document.createElement("li");
  item.textContent = "Row " + i;
  frag.append(item);
}
list.append(frag);

cloneNode

cloneNode(true) kopiert ein Element und seine Nachfahren und eignet sich zum Erstellen wiederholter Strukturen aus Vorlagen.

const copy = li.cloneNode(true);
list.append(copy);

Schnelltest

Wählen Sie die beste Technik aus.

Zusammenfassung

Verwenden Sie createElement, um vom DOM getrennte Elemente zu erstellen, konfigurieren Sie sie und fügen Sie sie anschließend mit append/prepend (Zeichenketten und mehrere Argumente erlaubt), appendChild (ein einzelner Knoten) oder insertBefore/insertAdjacentElement an präzisen Positionen ein. Stapeln Sie viele Einfügevorgänge mithilfe eines DocumentFragment und verwenden Sie Strukturen mit cloneNode(true) wieder.

Häufig gestellte Fragen

Ist die Lektion „Elemente erstellen und einfügen“ kostenlos?

Ja — der vollständige Text von „Elemente erstellen und einfügen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Elemente erstellen und einfügen“?

Erstellen Sie mit createElement und append neue Knoten. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Elemente erstellen und einfügen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy