JavaScript Element append() Method

What You’ll Learn

Element.append() is an instance method from the ParentNode API. It inserts nodes or strings after the last child of the element. Learn multi-argument appends, text coercion, how it compares to appendChild(), and five try-it labs.

Introduction

appendChild() adds one node at a time. append() is the modern ParentNode helper: add several nodes and plain strings in a single call, all as the new last children of the element.

Strings become Text nodes automatically—no createTextNode required for simple labels.

This page is part of JavaScript Element. Related topics include after() and appendChild().

Understanding the append() Method

Calling el.append(...nodes) inserts each argument at the end of el’s child list, in the order you pass them.

• It is an instance method on Element (ParentNode mixin).
• Arguments can be Node objects or strings (as Text).
• Multiple arguments append in the order given.
• Existing nodes in the document are moved, not cloned.
• Return value is undefined (unlike appendChild).
• MDN: append is unscopable—unavailable inside a with statement.

📝 Syntax

General forms of Element.append (MDN):

append(param1)
append(param1, param2)
append(param1, param2, /* …, */ paramN)

Parameters

• param1, …, paramN — a set of Node objects or strings to insert. Strings are inserted as equivalent Text nodes.

Return value

None (undefined).

Exceptions

• HierarchyRequestError DOMException — thrown when the node cannot be inserted at the specified point in the hierarchy (MDN).

Common patterns

const div = document.createElement("div");
const p = document.createElement("p");

div.append(p);                 // one element
div.append("Some text");       // one Text node
div.append("Hi ", p, "!");     // text + element + text
div.append(span1, span2);      // several elements

Examples Gallery

Examples follow MDN Element.append() patterns. Use View Output or Try It Yourself for each case.

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

console.log(div.childNodes); // NodeList [ <p> ]

1
P

let div = document.createElement("div");
div.append("Some text");

console.log(div.textContent); // "Some text"

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> ]

2
#text, P

const item = document.getElementById("item");
const badge = document.createElement("strong");
badge.textContent = "NEW";
const note = document.createElement("em");
note.textContent = "sale";

item.append("Shoes ", badge, " — ", note);

console.log(item.innerHTML);
// Shoes <strong>NEW</strong> — <em>sale</em>

Shoes <strong>NEW</strong> — <em>sale</em>

const list = document.getElementById("list");
const a = document.getElementById("a");
const b = document.getElementById("b");

list.append(a);

console.log([...list.children].map((el) => el.id).join(", "));
// "b, a"  (a moved to the end)

b, a

🚀 Common Use Cases

• Building list items or cards with mixed text and elements in one call.
• Appending labels without creating Text nodes by hand.
• Replacing several appendChild calls with a single append.
• Moving an existing child to the end of a container.
• Teaching ParentNode helpers vs classic Node methods.
• Pairing with after() / prepend for clear DOM placement.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available since April 2018).
• append() inserts children of the element—not siblings.
• Return value is always undefined.
• Invalid hierarchy can raise HierarchyRequestError.
• MDN: append is unscopable (not available inside with).
• Related: appendChild(), after(), children, JavaScript hub.

💡 Best Practices