appendChild() and append()

What Are They & When To Use

appendChild() and append() are JavaScript methods used to insert content into the DOM (Document Object Model).

• appendChild() is used when you want to append exactly one node to another element. Ideal for structured DOM manipulation where you want the method to return the inserted node.
• append() is more flexible — it allows you to add multiple nodes and/or text at once. Use it when you need to add a mix of elements and text dynamically.
• If you're supporting older browsers like Internet Explorer, prefer appendChild() as append() is not available there.

Definitions

appendChild(): Appends a single Node to the end of the list of children of a specified parent node.

append(): Appends one or more Nodes or strings to a parent node. More flexible than appendChild().

Important Points

• appendChild() allows only a single Node.
• append() allows multiple Nodes and/or text.
• appendChild() returns the appended node; append() returns undefined.
• append() is not supported in Internet Explorer.

💡 Syntax & Examples

Syntax:

parent.appendChild(childNode)

parent.append(node1, node2, "text")

Example using appendChild():

const parent = document.getElementById("container");
const newDiv = document.createElement("div");
newDiv.textContent = "Hello";
parent.appendChild(newDiv);
        

Example using append():

const parent = document.getElementById("container");
const newDiv1 = document.createElement("div");
const newDiv2 = document.createElement("div");
newDiv1.textContent = "Hi";
newDiv2.textContent = "There";
parent.append(newDiv1, newDiv2, " Hello Bro");
        

Difference Table

Summary

• Use appendChild() when appending one node and need a return value.
• Use append() for adding text and/or multiple elements together.
• Check browser compatibility before using append().