The .append()
method inserts a set of Node or string objects after the element's last child. This can be used to add a new node or move an existing child node to a new position. The append()
method does not return a value; its parameters are either Nodes or string objects.
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, whereas Node.appendChild()
only accepts Node
objects.
Element.append()
has no return value, whereas
Node.appendChild()
returns the appended Node
object.
Element.append()
can append several nodes and strings, whereas
Node.appendChild()
can only append one node.
append(param1) append(param1, param2) append(param1, param2, /* … ,*/ paramN)
param1
, …, paramN
A set of Node
or string objects to insert.
None (undefined
).
HierarchyRequestError
DOMException
Thrown when the node cannot be inserted at the specified point in the hierarchy.
let div = document.createElement("div"); let p = document.createElement("p"); div.append(p); console.log(div.childNodes); // NodeList [ <p> ]
let div = document.createElement("div"); div.append("Some text"); console.log(div.textContent); // "Some text"
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 not scoped into the with
statement.
See Symbol.unscopables
for more information.
let div = document.createElement("div"); with (div) { append("foo"); } // ReferenceError: append is not defined
Source: Mozilla, https://developer.mozilla.org/en-US/docs/Web/API/Element/append
This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.