Neue Elemente erstellen

Mit JavaScript kannst du HTML-Elemente erzeugen, ohne sie zuvor in der HTML-Datei zu schreiben. Dafür nutzt du vor allem document.createElement().

document.createElement()

document.createElement() erzeugt ein neues Element-Objekt. Du übergibst den Tag-Namen als String, z. B. "p", "button" oder "div".

Wichtig: Das Element existiert danach nur im Speicher. Es ist noch nicht auf der Seite sichtbar, bis du es mit Methoden wie appendChild ins DOM einfügst.

1const absatz = document.createElement("p");
2const button = document.createElement("button");
3const liste = document.createElement("ul");
4
5console.log(absatz);
6console.log(button);

<p></p>
<button></button>

Text mit textContent hinzufügen

Mit textContent setzt du reinen Text in ein Element. HTML-Tags werden nicht interpretiert, sondern als normaler Text behandelt. Das ist die sichere Variante für Nutzertexte.

1const absatz = document.createElement("p");
2absatz.textContent = "Hallo Welt";
3
4document.body.appendChild(absatz);

HTML mit innerHTML einfügen

Mit innerHTML kannst du HTML-Markup als String einfügen. Der Browser rendert die Tags als echte Elemente.

Vorsicht: Wenn der String von Nutzern kommt, kann das unsicher sein (XSS). Für einfachen Text nutze lieber textContent.

1const box = document.createElement("div");
2box.innerHTML = "<h2>Titel</h2><p>Ein kurzer Text.</p>";
3
4document.body.appendChild(box);

Beispiele

Typischer Ablauf: Element erzeugen → Inhalt setzen → optional Klasse oder Attribute setzen → ins DOM einfügen.

1const button = document.createElement("button");
2button.textContent = "Speichern";
3button.className = "btn";
4
5document.body.appendChild(button);

1const karte = document.createElement("article");
2karte.innerHTML = `
3  <h3>Produkt</h3>
4  <p>Preis: 19,99 €</p>
5`;
6
7document.querySelector("#produkte").appendChild(karte);

Im nächsten Kapitel lernst du genauer, wie du erzeugte Elemente an verschiedenen Stellen im DOM einfügst.