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
# ref-for-dom-parentnode-append①

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
append

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch