0Pricing
Frontend Academy · Lektion

Elemente erstellen und anhängen

Verwenden Sie createElement, setAttribute, append und remove, um die DOM-Struktur dynamisch aufzubauen und zu verändern.

Elemente erstellen und anhängen ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

createElement

document.createElement(tagName) erstellt ein neues Element im Speicher – es befindet sich noch nicht im DOM. Anschließend legen Sie seine Eigenschaften fest und hängen es in den Baum ein.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append und appendChild

parent.append(child) fügt einen Knoten oder String am Ende der untergeordneten Elemente von parent hinzu. appendChild ist das ältere Gegenstück, aber append ist flexibler – es akzeptiert mehrere Knoten und Strings.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, before, after

parent.prepend() fügt am Anfang ein. element.before() fügt etwas vor dem Element ein. element.after() fügt etwas danach ein.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) fügt HTML an einer angegebenen Position ein, ohne vorhandenen Inhalt zu ersetzen. Positionen: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true) erstellt eine tiefe Kopie eines Elements einschließlich aller untergeordneten Elemente. Übergeben Sie false für eine flache Kopie. Das ist nützlich, um Template-Elemente zu duplizieren.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild und remove()

element.remove() entfernt das Element aus dem DOM. Auch das ältere parent.removeChild(child) funktioniert weiterhin. Entfernte Elemente können noch über Variablen referenziert und wieder angehängt werden.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement) ersetzt das alte Element im DOM durch das neue. Das ist praktischer als das ältere replaceChild-Muster.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment für Sammel-Einfügungen

Ein DocumentFragment ist ein leichtgewichtiger Container, der nicht im DOM existiert. Erstellen Sie darin einen Teilbaum und hängen Sie ihn anschließend in einem Vorgang an — dadurch wird nur ein Reflow statt N Reflows ausgelöst.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

Das &lt;template&gt;-Element

Das HTML-Element <template> enthält Markup, das erst nach dem Klonen mit JavaScript dargestellt wird. Es ist besser geeignet, als Strings zu erstellen oder sichtbare Elemente zu klonen.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

Eigenschaften im Vergleich zu Attributen setzen

Elementeigenschaften (el.href, el.src, el.value) sind oft die direkteste und leistungsfähigste Möglichkeit, Werte zu setzen. Attribute (setAttribute) eignen sich am besten für benutzerdefinierte oder ARIA-Attribute, für die keine entsprechende DOM-Eigenschaft vorhanden ist.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

innerHTML bei Benutzerdaten vermeiden

Wenn Sie Elemente aus von Benutzern bereitgestellten Daten erstellen, verwenden Sie immer DOM-Methoden (createElement, textContent, setAttribute), statt einen HTML-String zu erstellen und innerHTML zu verwenden. Fügen Sie Benutzereingaben niemals in HTML-Strings ein.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

Kurztest

Sie müssen 100 Listenelemente zu einem <ul> hinzufügen, ohne 100 Reflows auszulösen. Welcher Ansatz ist am besten geeignet?

Zusammenfassung: DOM-Elemente erstellen

createElement erstellt Elemente im Speicher. append/prepend/before/after fügen sie in den Baum ein. remove() löscht ein Element. DocumentFragment bündelt Einfügungen und verbessert dadurch die Leistung. Das