Element: append() method
The Element.append()
method
inserts a set of Node
objects or strings after
the last child of the Element
. Strings
are inserted as equivalent Text
nodes.
Differences from Node.appendChild()
:
-
Element.append()
allows you to also append strings, whereasNode.appendChild()
only acceptsNode
objects. -
Element.append()
has no return value, whereasNode.appendChild()
returns the appendedNode
object. -
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
HierarchyRequestError
DOMException
-
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
BCD tables only load in the browser