Element: append() method
The Element.append() method
inserts a set of Node objects or string objects after
the last child of the Element. String objects
are inserted as equivalent Text nodes.
Differences from Node.appendChild():
-
Element.append()allows you to also append string objects, whereasNode.appendChild()only acceptsNodeobjects. -
Element.append()has no return value, whereasNode.appendChild()returns the appendedNodeobject. -
Element.append()can append several nodes and strings, whereasNode.appendChild()can only append one node.
Syntax
js
append(param1)
append(param1, param2)
append(param1, param2, /* …, */ paramN)
Parameters
Return value
None (undefined).
Exceptions
HierarchyRequestErrorDOMException-
Thrown when the node cannot be inserted at the specified point in the hierarchy.
Examples
Appending an element
js
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p);
console.log(div.childNodes); // NodeList [ <p> ]
Appending text
js
let div = document.createElement("div");
div.append("Some text");
console.log(div.textContent); // "Some text"
Appending an element and 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> ]
The append method is unscopable
The append() method is not scoped into the with statement.
See Symbol.unscopables for more information.
js
let div = document.createElement("div");
with (div) {
append("foo");
}
// ReferenceError: append is not defined
Specifications
| Specification |
|---|
| DOM Standard # ref-for-dom-parentnode-append① |
Browser compatibility
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
append | |||||||||||