The JavaScript append() method

Q: What is the difference between append() and appendChild()?

append() accepts multiple nodes and plain strings and returns nothing; appendChild() takes a single node and returns it.

Q: How do I add an element to the start instead of the end?

Use prepend(), the start-of-children counterpart to append().

Q: Can I append several elements at once?

Yes, pass them as separate arguments: parent.append(a, b, c).

Method JavaScript All modern browsers Updated June 23, 2026

Quick answer

The append() method adds one or more nodes or text strings to the end of an element's children. parent.append(el, "some text"). It's more flexible than appendChild(): it accepts multiple arguments and plain strings (inserted as safe text), and it returns nothing.

Overview

append() adds content to the end of an element, inside it. It's the modern, more capable sibling of appendChild(), with two upgrades: it accepts multiple arguments in one call, and those arguments can be strings as well as nodes. list.append(item1, item2, "and some text") adds all three at once.

The string handling is a quiet safety win. Strings passed to append() are inserted as plain text, not parsed as HTML, so el.append(userInput) can't inject scripts the way innerHTML can. That makes it a safe way to add text and nodes from data.

The trade-offs versus appendChild(): append() returns undefined (appendChild returns the node), and it's not supported in very old browsers (which is rarely a concern now). Its mirror is prepend() for adding at the start, and there are before()/after() for inserting outside the element. For building many nodes efficiently, append them to a DocumentFragment first.

Syntax

parent.append(node)
parent.append(node1, node2, "text")   // multiple, mixed

const li = document.createElement("li");
list.append(li, "extra text");

Parameters

The append() method accepts the following parameters.

Parameter	Description
`nodes/strings`	One or more nodes or strings to add at the end. Strings are inserted as plain text (not parsed as HTML).

Example

 Live example
                                    
                                    <div id="box" style="font:15px system-ui"></div>
<script>
  const box = document.getElementById('box');

  const strong = document.createElement('strong');
  strong.textContent = 'Done! ';

  // node + plain text in one call (text is inserted safely)
  box.append(strong, 'Items were added.');
</script>

Best practices

Use append() to add multiple nodes and text in one call.
Pass strings for text content; they're inserted safely, not parsed as HTML.
Use prepend() to add at the start, and before()/after() to insert outside the element.
Batch many insertions through a DocumentFragment for fewer reflows.

Frequently asked questions

What is the difference between append() and appendChild()?

append() accepts multiple nodes and plain strings and returns nothing; appendChild() takes a single node and returns it.

Is append() safe with user text?

Yes, strings are inserted as plain text, not parsed as HTML, so they can't inject scripts (unlike innerHTML).

How do I add an element to the start instead of the end?

Use prepend(), the start-of-children counterpart to append().

Can I append several elements at once?

Yes, pass them as separate arguments: parent.append(a, b, c).

addEventListener() appendChild()

References