JavaScript Element append() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word APPEND

Definition

The Element.append() method inserts one or more nodes or strings after the last child of the element (MDN). Strings become Text nodes. It returns undefined.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.append. Start with this line.

JavaScript
el.append(node1, node2, …)
CallWhat it does
el.append(node1, node2, …)Primary signature.
el.append(...)Call with the arguments your case needs.

Built into the browser. Call append(...) on an Element — no import required.

Library declarations
JavaScript
el.append(node1, node2, …)

Parameters

ParameterDescription
Parent elementRequired. Receives the new last children
param1…paramNRequired. Node objects and/or strings

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Append an Element

Add a paragraph as the last child of a container.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
const p = document.createElement("p");
p.textContent = "Hi";

box.append(p);
out.textContent = box.innerHTML;
Try It Yourself

How It Works

  1. Pick the parent. box is where the new child will live.
  2. Create the node. Build a p (or any element).
  3. Call append(). The paragraph becomes the last child.
  4. Inspect. innerHTML shows the updated children.

Example 2 — Append Text

Pass a string — the browser creates a Text node for you.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");

box.append("Some text");
out.textContent = box.textContent;
Try It Yourself

How It Works

  1. Pass a string. No need for createTextNode here.
  2. Browser coerces it. MDN: strings become equivalent Text nodes.
  3. Unlike appendChild. appendChild only accepts Node objects.
  4. Read the result. textContent confirms the text was added.

Example 3 — Multiple Arguments

Append text and an element in one call, in argument order.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
const p = document.createElement("p");
p.textContent = "Hi";

box.append("Note: ", p);
out.textContent = box.innerHTML;
Try It Yourself

How It Works

  1. Pass several items. Nodes and strings can mix in one call.
  2. Keep argument order. First argument is inserted first among the new bits.
  3. One call. Cleaner than several appendChild calls.
  4. Verify. Parent HTML shows text, then the paragraph.
Compatibility

Browser Support

Element.append() is Baseline Widely available on MDN (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard. Prefer it over appendChild when you need strings or multiple nodes.

✓ Baseline Widely available

Element.append()

Modern ParentNode insert — nodes or strings after the last child. Widely supported since 2018.

2018+ Widely available
Google Chrome 54+
Supported
Mozilla Firefox 49+
Supported
Apple Safari 10+
Supported
Microsoft Edge 17+
Supported
Opera 41+
Supported
Internet Explorer Not supported — use appendChild
Unavailable
append() Baseline

Bottom line: Safe for modern browsers. For very old IE, use appendChild (one Node at a time).

Frequently Asked Questions

It inserts one or more Node objects or strings after the last child of the element (MDN). Strings become Text nodes.
No. MDN marks Element.append() as Baseline Widely available (across browsers since April 2018). It is not Deprecated, Experimental, or Non-standard.
append() can take multiple nodes and strings, and returns undefined. appendChild() accepts only one Node and returns that child (MDN).
Nothing useful — the return value is undefined. Inspect childNodes or innerHTML to verify what was added.
Yes. Pass a string: el.append("Hello"). The browser creates a Text node for you.
Like appendChild, append moves it to the new parent. Use cloneNode() if you need a copy.

Next: ariaNotify()

Announce a message to assistive technology from an element.

ariaNotify() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

19 people found this page helpful

JavaScript Element animate() Method JavaScript Element ariaNotify() Method