HTML-Inhalt mit JavaScript an das vorhandene HTML-Element anhängen

Um Inhalte zu einem vorhandenen Element hinzuzufügen, wählen Sie die API passend zum Inhalt: Mit appendChild() fügen Sie einen DOM-Knoten ein, mit insertAdjacentHTML() parsen Sie eine HTML-Zeichenfolge und fügen sie an einer ausgewählten Position ein. Eine Zuweisung an innerHTML ersetzt die Nachfahren des Elements und eignet sich daher nicht, wenn die vorhandenen Kindelemente erhalten bleiben sollen.

Nachteil der Verwendung von innerHTML zum Hinzufügen eines neuen HTML-Knotens

Wird einem Element ein Wert für innerHTML zugewiesen, wird die Zeichenfolge geparst und die Nachfahrenknoten dieses Elements werden ersetzt. Dabei können der Zustand dieser Knoten und direkt an ihnen registrierte Ereignis-Listener verloren gehen. Das bedeutet nicht, dass alle Attribute des Zielelements entfernt werden: Das Zielelement bleibt bestehen, seine Kindelemente werden ersetzt.

Sowohl innerHTML als auch insertAdjacentHTML() parsen Zeichenfolgen als Markup. Enthält eine solche Zeichenfolge nicht vertrauenswürdige Eingaben, kann dadurch ein Cross-Site-Scripting-Risiko (XSS) entstehen. Erstellen Sie vorzugsweise Knoten und weisen Sie vom Benutzer bereitgestellte Werte über Texteigenschaften wie textContent zu. Wenn Markup eingefügt werden muss, bereinigen Sie es mit einem für die Anwendung geeigneten Verfahren. Siehe MDNs Sicherheitshinweise zu innerHTML.

HTML-Inhalte hinzufügen, ohne DOM-Elemente zu ersetzen

Erstellen Sie für ein neues Element einen Knoten und fügen Sie ihn in den vorhandenen DOM-Baum ein. Für eine vertrauenswürdige HTML-Zeichenfolge verwenden Sie insertAdjacentHTML() und wählen die Einfügeposition aus. Mit diesen Vorgehensweisen fügen Sie Inhalte hinzu, ohne die vorhandenen Nachfahren des Zielelements zu ersetzen. Die folgenden Beispiele zeigen beide Möglichkeiten anhand eines einfachen Adressformulars.

HTML-Inhalte in JavaScript mit appendChild() anhängen

appendChild() erwartet einen Knoten, keine HTML-Zeichenfolge. Die Methode fügt den Knoten nach dem derzeit letzten Kindelement des Ziels ein. Gehört der Knoten bereits zu einem anderen Teil des Dokuments, wird derselbe Knoten verschoben und keine Kopie erstellt.

Führen Sie dieses Beispiel aus:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

function addAddressLine(addressContainer, lineCount) {
  const input = document.createElement("input");
  input.type = "text";
  input.placeholder = `Address Line ${lineCount}`;
  addressContainer.appendChild(input);
}

if (typeof document !== "undefined") {
  let lineCount = 0;
  const button = document.getElementById("add-address");
  const addressContainer = document.getElementById("address");

  button.addEventListener("click", () => {
    addAddressLine(addressContainer, ++lineCount);
  });
}

Platzieren Sie das Skript hinter diesem Formular oder laden Sie es mit defer, damit die Elemente bereits vorhanden sind, wenn das Skript sie abruft:

<form>
  <label>Name: <input id="name" type="text"></label>
  <div id="address">
    <label>Address: <input id="contact" type="text"></label>
  </div>
  <button id="add-address" type="button">Add Address Line</button>
</form>

Der Click-Handler erhöht die Zeilennummer und hängt ein neues Texteingabefeld an das Element address an. Die ursprünglichen Namens- und Adressfelder bleiben erhalten. Das Attribut type="button" verhindert, dass die Schaltfläche das Formular absendet.

Hinweis

append() ist eine weitere Möglichkeit: Die Methode akzeptiert Knoten und Zeichenfolgen, fügt eine Zeichenfolge jedoch als Text ein, statt sie als HTML zu parsen. Verwenden Sie appendChild(), wenn der zurückgegebene Knoten benötigt wird oder der Code gezielt die etablierte Operation für einen einzelnen Knoten ausführen soll. Die Browserunterstützung wird hier nicht behandelt; prüfen Sie bei konkreten Anforderungen die Zielbrowser Ihrer Anwendung.

Mit insertAdjacentHTML() HTML an einer bestimmten Position einfügen

Rufen Sie target.insertAdjacentHTML(position, htmlString) auf, um eine Zeichenfolge zu parsen und das daraus entstehende Markup relativ zu target einzufügen:

• beforebegin fügt das Markup direkt vor dem Zielelement ein. Das Zielelement muss ein Elternelement haben.
• afterbegin fügt das Markup im Zielelement vor dessen erstem Kindelement ein.
• beforeend fügt das Markup im Zielelement nach dessen letztem Kindelement ein. Diese Position wird zum Anhängen von Markup verwendet.
• afterend fügt das Markup direkt nach dem Zielelement ein. Das Zielelement muss ein Elternelement haben.

Das folgende Beispiel fügt ein neues Adressfeld am Ende des Adresscontainers ein:

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

if (typeof document !== "undefined") {
  const addressContainer = document.getElementById("address");
  addressContainer.insertAdjacentHTML(
    "beforeend",
    '<input type="text" placeholder="Additional address line">'
  );
}

Im Gegensatz zu appendChild() parst diese Methode das zweite Argument als HTML. Verwenden Sie sie nur, wenn die Zeichenfolge vertrauenswürdig oder sicher bereinigt wurde; verketten Sie keine nicht vertrauenswürdigen Texte mit Markup. Erstellen Sie für vom Benutzer eingegebene Inhalte ein Element, setzen Sie textContent oder andere geeignete Eigenschaften und hängen Sie anschließend den Knoten an.