append() vs appendChild() JavaScript

Learn the key differences between append() and appendChild() when adding an element to the DOM hierarchy in JavaScript.

• append() vs appendChild() → you’re here
• append()

1. append() Accepts Node Objects/DOMStrings But appendChild() Only Accepts Node Objects

The append() method accepts

• Node Objects → which are element nodes, text nodes etc.
• DOMStrings → which are plain text in quotes.

The appendChild() method only accepts

• Node Objects

Let’s see that in action.

1.1 Add Node Object Using append() and appendChild()

Here is a simple HTML markup.

<section id="box-wrapper">
  <div class="box">div <br>1</div>
  <div class="box">div <br>2</div>
  <div class="box">div <br>3</div>
  <div class="box">div <br>4</div>
</section>

Now add a node object using both append() and appendChild() methods.

Get a DOM reference of the box-wrapper element by calling the getElementById() method on the document object.

const boxWrapper = document.getElementById("box-wrapper");

const box = document.createElement("div");
box.innerHTML = 'div <br> 5';
box.style.backgroundColor = "orange";
box.classList.add("box");
 
boxWrapper.append(box); 
// or
boxWrapper.appendChild(box);
//works

Then create a div element by calling createElement() on the document object.

After that, add text, background colour and class to the newly created div element.

Finally, add it to the DOM hierarchy by calling the append() or appendChild() method.

And both work like a charm.

Try it out

See the Pen append vs appendChild JavaScript #1 by SoftAuthor (@softauthor) on CodePen.

1.2 Add DOMString Only Using append()

Now, add a DOMString to the end of the children elements inside the box-wrapper parent element using the append() method.

const boxWrapper = document.getElementById("box-wrapper");
boxWrapper.append("Not a box"); // Success

And it’ll work as expected.

But when we use the appendChild() method, it will throw an error.

boxWrapper.appendChild("Not a box"); // Error - It's not of type 'Node'

As I mentioned earlier, this is because appendChild() only accepts Node Objects.

Try it out

See the Pen append vs appendChild JavaScript #1.1 by SoftAuthor (@softauthor) on CodePen.

2. append() Allows Us To Add Multiple Node Objects At Once Unlike appendChild()

append() allows you to add multiple items while appendChild() allows only a single item.

Let’s add two div elements (box5 and box6) after the last child of the element inside the parent element (section#box-wrapper) using the append() method.

const boxWrapper = document.getElementById("box-wrapper");

const box5 = document.createElement("div");
box5.innerHTML = 'div <br> 5';
box5.classList.add("box");

const box6 = document.createElement("div");
box6.innerHTML = 'div <br> 6';
box6.classList.add("box");

boxWrapper.append(box5, box6);

Append both div element node objects by passing them as arguments of the append() method separated by a comma.

Try it out

See the Pen Append JavaScript #3 by SoftAuthor (@softauthor) on CodePen.

On the other hand, the appendChild() method allows us to add only one element at a time.

You’ll need to call it again with a second element in order to append another element.

const boxWrapper = document.getElementById("box-wrapper");
...
boxWrapper.appendChild(box5);
boxWrapper.appendChild(box6);

Try it out

See the Pen appendChild() JavaScript #3 by SoftAuthor (@softauthor) on CodePen.

3. appendChild() Returns Node Object But append() Does Not.

The appendChild() method will return the appended node object while append() does not have a return value.

const boxWrapper = document.getElementById("box-wrapper");

const box = document.createElement("div");
box.innerHTML = 'div <br> 5';
box.style.backgroundColor = "orange";
box.classList.add("box");

console.log(boxWrapper.append(box)); // undefined
console.log(boxWrapper.appendChild(box)); // returns appended node object

This is great because we can add one or more child node objects by chaining them together, especially when using Object.assign.

boxWrapper.appendChild(
  Object.assign(
    document.createElement('div'),
    { classList : 'box',
      innerHTML: "div <br>5"
    }
  )
).appendChild(
  Object.assign(
    document.createElement("button"), {
      innerHTML: "Button"
    }
  )
)

Try it out

See the Pen append vs appendChild JavaScript #3 by SoftAuthor (@softauthor) on CodePen.