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 append DOMString 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.

Syntax

append(...nodesOrDOMStrings)

Parameters

nodesOrDOMStrings
A set of Node or DOMString objects to insert.

Exceptions

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
The definition of 'ParentNode.append()' in that specification.

Browser compatibility

BCD tables only load in the browser

See also