Element.append()
The Element.append()
method
inserts a set of Node
objects or DOMString
objects after
the last child of the Element
. DOMString
objects
are inserted as equivalent Text
nodes.
Differences from Node.appendChild()
:
-
Element.append()
allows you to also appendDOMString
objects, 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
append(...nodesOrDOMStrings)
Parameters
Exceptions
HierarchyRequestError
DOMException
-
Thrown when the node cannot be inserted at the specified point in the hierarchy.
Examples
Appending an element
let div = document.createElement("div")
let p = document.createElement("p")
div.append(p)
console.log(div.childNodes) // NodeList [ <p> ]
Appending text
let div = document.createElement("div")
div.append("Some text")
console.log(div.textContent) // "Some text"
Appending an element and 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 unscopable
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
Specifications
Specification |
---|
DOM Standard # ref-for-dom-parentnode-append① |
Browser compatibility
BCD tables only load in the browser