JavaScriptDomIntermediate

append()

Appends nodes and/or text to a parent (supports multiple args).

Review the syntaxStudy the examplesOpen the coding app
parent.append(nodeOrText, ...more)
Open Coding Reference

This static page keeps the syntax and examples indexed for search, while the coding app handles interactive exploration and saved references.

What it does

Overview

Appends nodes and/or text to a parent (supports multiple args).

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. Unlike Node.appendChild(), this method allows for multiple arguments and accepts raw strings directly. It has no return value (returns undefined), whereas appendChild() returns the appended node. In terms of performance, passing multiple nodes to a single append() call is more efficient than making multiple appendChild() calls because it can reduce the number of reflows triggered in the browser. Note that if an appended node is already part of the document, it is moved to the new position rather than cloned. This method is part of the ParentNode interface and is not supported in Internet Explorer.

Quick reference

Syntax

parent.append(nodeOrText, ...more)

Inputs

Parameters

nodeOrTextNode | string · One or more nodes or strings to append.

See it in practice

Examples

1

Appending Multiple Nodes and Text

var div = document.createElement('div');
var p = document.createElement('p');
p.textContent = 'First child';

div.append(p, 'Plain text content', document.createElement('span'));

console.log(div.childNodes.length);
console.log(div.lastChild.tagName);
Output:
3 "SPAN"

This demonstrates how append() can take multiple arguments of different types (Nodes and strings) in a single call.

2

Moving an Existing Element

var section1 = document.createElement('section');
var section2 = document.createElement('section');
var header = document.createElement('h1');
header.textContent = 'Title';

section1.append(header);
section2.append(header);

console.log(section1.childNodes.length);
console.log(section2.childNodes.length);
Output:
0 1

Like appendChild, append() moves a node to the new parent if it already exists in the DOM. It does not create a copy.

3

Using Spread Syntax with append()

var ul = document.createElement('ul');
var fruits = ['Apple', 'Banana', 'Cherry'];

var items = fruits.map(function(text) {
  var li = document.createElement('li');
  li.textContent = text;
  return li;
});

ul.append(...items);
console.log(ul.children.length);
console.log(ul.firstChild.textContent);
Output:
3 "Apple"

The spread operator allows you to append an entire array of elements to a parent node efficiently.

Debug faster

Common Errors

1

TypeError

Cause: Attempting to use append() in Internet Explorer.

Fix: IE does not support append(). Use appendChild() for single nodes or use a polyfill.

element.append('text'); // Throws 'Object doesn't support property or method' in IE
2

LogicError

Cause: Expecting a return value from the append() call.

Fix: append() returns undefined. If you need a reference to the node, save it to a variable before appending.

var appended = parent.append(child); // appended is undefined

Runtime support

Compatibility

BrowserAll modern browsers, IE not supportedModern DOM

Source: MDN Web Docs

Common questions

Frequently Asked Questions

Appends nodes and/or text to a parent (supports multiple args).

nodeOrText: One or more nodes or strings to append.

TypeError: IE does not support append(). Use appendChild() for single nodes or use a polyfill. LogicError: append() returns undefined. If you need a reference to the node, save it to a variable before appending.