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 appendChild():

• Element.append() allows you to also append strings, 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(param1)
append(param1, param2)
append(param1, param2, /* …, */ paramN)

Parameters

• param1, …, paramN
  • : A set of Node objects or strings to insert.

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

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 unscopables for more information.

let div = document.createElement("div");

with (div) {
  append("foo");
}
// ReferenceError: append is not defined

Specifications

Browser compatibility

See also

• prepend()
• appendChild()
• after()
• insertAdjacentElement()
• NodeList