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.

append(...nodesOrDOMStrings)

nodesOrDOMStrings

A set of Node or DOMString objects to insert.

• HierarchyRequestError: 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 

• Element.prepend()
• Node.appendChild()
• ChildNode.after()
• Element.insertAdjacentElement()
• NodeList