Element: append()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die Element.append()-Methode fügt eine Reihe von Node-Objekten oder Zeichenfolgen nach dem letzten Kind des Element ein. Zeichenfolgen werden als gleichwertige Text-Knoten eingefügt.

Unterschiede zur Node.appendChild():

  • Element.append() ermöglicht es Ihnen, auch Zeichenfolgen hinzuzufügen, während Node.appendChild() nur Node-Objekte akzeptiert.
  • Element.append() hat keinen Rückgabewert, während Node.appendChild() das angehängte Node-Objekt zurückgibt.
  • Element.append() kann mehrere Knoten und Zeichenfolgen anhängen, während Node.appendChild() nur einen einzelnen Knoten anhängen kann.

Syntax

js
append(param1)
append(param1, param2)
append(param1, param2, /* …, */ paramN)

Parameter

param1, …, paramN

Eine Reihe von Node-Objekten oder Zeichenfolgen, die eingefügt werden sollen.

Rückgabewert

Keiner (undefined).

Ausnahmen

HierarchyRequestError DOMException

Ausgelöst, wenn der Knoten an der angegebenen Stelle in der Hierarchie nicht eingefügt werden kann.

Beispiele

Einfügen eines Elements

js
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p);

console.log(div.childNodes); // NodeList [ <p> ]

Einfügen von Text

js
let div = document.createElement("div");
div.append("Some text");

console.log(div.textContent); // "Some text"

Einfügen eines Elements und von Text

js
let div = document.createElement("div");
let p = document.createElement("p");
div.append("Some text", p);

console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]

Die append-Methode ist nicht einschließbar

Die append()-Methode wird im with-Statement nicht eingeschlossen. Siehe Symbol.unscopables für weitere Informationen.

js
let div = document.createElement("div");

with (div) {
  append("foo");
}
// ReferenceError: append is not defined

Spezifikationen

Specification
DOM Standard
# ref-for-dom-parentnode-append①

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch