JavaScript Daten an div . anhängen

Um Daten an ein vorhandenes div anzuhängen, wählen Sie es aus und entscheiden anhand des neuen Werts, ob es sich um einfachen Text oder vertrauenswürdiges HTML handelt. Bei gewöhnlichem Text vermeiden textContent oder ein Textknoten die HTML-Verarbeitung. Verwenden Sie insertAdjacentHTML, wenn Sie gezielt Markup hinzufügen möchten. Die folgenden Beispiele setzen voraus, dass die Seite vor der Ausführung des Skripts ein Element <div id="myDiv"> enthält. (JavaScript)

Die passende Methode für den hinzuzufügenden Inhalt auswählen

Verwenden Sie textContent oder createTextNode für Benutzereingaben und anderen einfachen Text. Diese APIs erzeugen Text, statt Zeichen wie < als Markup zu interpretieren. Wenn Sie ein neues Element mit Text oder Attributen benötigen, erstellen Sie das Element und hängen Sie es als Knoten an.

Verwenden Sie insertAdjacentHTML, wenn Sie eine HTML-Zeichenfolge kontrollieren und als Elemente parsen lassen möchten. Vermeiden Sie innerHTML += zum Anhängen von Inhalten an ein bereits gefülltes Element: Beim Auslesen und erneuten Setzen von innerHTML wird der Inhalt erneut geparst und die Nachfahrenknoten werden ersetzt. Diese Knoten werden aus dem neuen Baum entfernt, doch vorhandene JavaScript-Referenzen zeigen weiterhin auf die nun abgetrennten Knoten. Listener bleiben an den alten Knoten hängen; sie gelten nicht für die neu erzeugten Knoten. Welche Methode passt, hängt von der Art des Inhalts ab, nicht von einer allgemeinen Rangfolge der Geschwindigkeit.

Einfachen Text mit textContent oder appendChild anhängen

Dieses Beispiel erstellt einen Absatz, weist ihm Text zu und hängt den neuen Knoten an das ausgewählte div an. getElementById gibt null zurück, wenn die Seite kein passendes Element enthält. Prüfen Sie daher das Ergebnis, bevor Sie es verwenden.

Führen Sie dieses Beispiel auf einer Seite aus, die das Zielelement enthält:

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

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    const paragraph = document.createElement("p");
    paragraph.textContent = "A new paragraph.";
    target.appendChild(paragraph);
  }
}

Dieses Browserbeispiel wurde im bereitgestellten Paket nicht ausgeführt. Wenn das Zielelement vorhanden ist, fügt es einen Absatz ein, dessen Inhalt als Text behandelt wird. Sie können auch mit document.createTextNode("More text") direkt einen Textknoten erstellen und ihn an appendChild übergeben, wenn Sie kein umschließendes Element benötigen.

HTML mit insertAdjacentHTML anhängen

Rufen Sie insertAdjacentHTML für das Zielelement auf und übergeben Sie eine Position sowie eine HTML-Zeichenfolge. Mit beforeend werden die geparsten Knoten innerhalb des div hinter den vorhandenen untergeordneten Knoten eingefügt. Die anderen Positionen sind afterbegin (innerhalb des Elements, vor seinen untergeordneten Knoten), beforebegin (direkt außerhalb des Elements, davor) und afterend (direkt außerhalb des Elements, danach).

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

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.insertAdjacentHTML("beforeend", "<p>A new paragraph.</p>");
  }
}

Dieses Browserbeispiel wurde im bereitgestellten Paket nicht ausgeführt. Verwenden Sie diese Methode nur, wenn die übergebene Zeichenfolge tatsächlich als HTML geparst werden soll; nicht vertrauenswürdige Eingaben werden dadurch nicht bereinigt. Mit der Position beforeend fügen Sie neues Markup am Ende innerhalb des div ein.

innerHTML mit Bedacht verwenden

innerHTML stellt das Markup eines Elements als Zeichenfolge bereit. Eine Zeichenfolge anzuhängen und wieder zuzuweisen, kann wie ein einfaches Ergänzen wirken. Der Browser parst den Inhalt jedoch erneut und ersetzt die Nachfahrenknoten des Elements. Vorhandene Knoten werden aus dem neuen Baum entfernt, aber Referenzen zeigen weiterhin auf diese alten, abgetrennten Knoten; auch ihre Listener bleiben an ihnen hängen und gelten nicht für die neu erzeugten Knoten. Verwenden Sie innerHTML nicht mit nicht vertrauenswürdigen Daten: Der Browser behandelt den Wert als Markup, wodurch Sicherheitslücken durch Cross-Site-Scripting (XSS) entstehen können.

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

if (typeof document !== "undefined") {
  const target = document.getElementById("myDiv");
  if (target) {
    target.innerHTML = target.innerHTML + "<p>A new paragraph.</p>";
  }
}

Dieses Browserbeispiel wurde im bereitgestellten Paket nicht ausgeführt. Es veranschaulicht das Verhalten beim erneuten Zuweisen und ist nicht die bevorzugte Methode, um beim Anhängen vorhandene untergeordnete Knoten zu erhalten. Erstellen Sie für dynamischen Text stattdessen ein Element, setzen Sie dessen textContent und hängen Sie das Element an.

Inhalte mit jQuery anhängen

Wenn ein Projekt bereits jQuery verwendet, fügt .append() Inhalte am Ende jedes passenden Elements ein. Eine an .append() übergebene Zeichenfolge wird als HTML geparst. Übergeben Sie daher keine nicht vertrauenswürdigen Zeichenfolgen. Für einfachen Text erstellen Sie einen DOM-Knoten und hängen ihn an oder verwenden Sie den weiter oben beschriebenen nativen Ansatz mit textContent.

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

if (typeof window !== "undefined" && window.jQuery) {
  const target = jQuery("#myDiv");
  if (target.length) {
    target.append("<p>A new paragraph.</p>");
  }
}

Dieses Browserbeispiel wurde im bereitgestellten Paket nicht ausgeführt. Es setzt voraus, dass jQuery geladen wurde und ein passendes Element vorhanden ist. Fehlt eine dieser Voraussetzungen, führt der abgesicherte Code nichts aus.

Ergebnis prüfen und häufige Fehler vermeiden

Prüfen Sie, ob der Selektor das gewünschte Element findet und das Skript erst ausgeführt wird, wenn das Element verfügbar ist. Platzieren Sie das Skript beispielsweise hinter dem div oder warten Sie, bis das Dokument geladen ist. getElementById("myDiv") wählt ein Element anhand seiner ID aus; querySelector("#myDiv") ist eine gleichwertige Alternative mit einem CSS-Selektor. Behandeln Sie einen fehlenden Treffer, bevor Sie eine Methode für das Ergebnis aufrufen.

Für einfachen Text verwenden Sie vorzugsweise textContent oder einen Textknoten, damit Zeichen Text bleiben. Für Markup verwenden Sie insertAdjacentHTML("beforeend", html), um es am Ende innerhalb des Zielelements einzufügen. Stellen Sie sicher, dass das HTML vertrauenswürdig ist oder nach einer geeigneten Richtlinie bereinigt wurde. Behandeln Sie innerHTML += nicht als Methode, die vorhandene Knoten erhält. Verwenden Sie .append() von jQuery nur, wenn das Projekt jQuery bereits einbindet und der Inhalt als HTML geparst werden soll. Diese Methoden dienen dem Anhängen von Inhalten; das Entfernen eines Elements ist ein separater Vorgang im DOM.