Differences Between Javascript append() and appendChild()

Javascript append() and appendChild() methods are commonly used to add child objects such as elements or text at the end of the children of a parent object. At certain times, both append() and appendChild() can be used for the same task. At other times too, their functionalities differ, and one of these methods will be required over the other. This will depend on the type of item that is being added.

It is very important, as a javascript developer, to know when you can use either append() or appendChild() for the same task, and when they need to be used differently. This will help to know which of the methods you will need to call when adding child items to an HTML element or node.

Our main goal in this post is to understand the differences between append() and appendChild() methods in javascript. However, we will also consider the way in which they are similar. After going through the discussion in this post, we will realise that append() can do what appendChild() does, but the opposite is not so. appendChild() cannot do all that append() does, leading us to understand the differences between them.

Table of Contents

• appendChild()
• append()
• Relationship Between Element and Node
• Differences Between append() and appendChild()
  • Parameter Types
  • Number of Parameters
  • Return Value
• Summary

appendChild()

The appendChild() method is defined in the Node interface, an abstract base class from which other types are derived. This method adds an object of type Node as the last item to the children of a parent Node object. After adding the specified item to the list of children, the method returns the same Node object that was added.

appendChild() accepts only one Node item in its method signature. This means that you can only add one item at a time with this method. We will see practical usages of this method shortly.

append()

The append() method is defined in the Element class. This method adds an object of type Node or string as the last item of the children of a parent Node or Element object. In other words, append() can add an object of type Node as well as a string object as last child. But recall that appendChild() also adds an object of type Node as the last child. This implies that append() does what appendChild() does, but extends further to accept and add string objects as well.

Unlike appendChild() which adds only a single Node item at a time, append() can be used to add more than one objects to the children of a parent Node. Additionally, this method allows adding string objects as well.

Relationship Between Element and Node

To better understand the differences between append() and appendChild(), it will be very helpful to first understand the relationship that exists between Element and Node types in javascript.

In javascript, the Node type is an abstract base class in which appendChild() is defined. appendChild() is defined to accept and add a single object of Node type, and returns the added item.

Node.appendChild(Node)

The Element class, on the other hand, is derived from the Node abstract class. Since Element derives from Node, it implies that when we create an Element object such as div, span, p, etc, that object is also of type Node, and therefore automatically inherits the appendChild() method defined in the Node interface. Hence, we can say that an Element object is also a Node object, and can therefore call the appendChild() method.

// create a div Element object
let div = document.createElement('div');

// create a p Element object which will be appended
let p = document.createElement('p');
p.innerText = 'An Element object is also a Node object.';

// Since div is an Element object, it is also a Node object
// Therefore, it can call appendChild() to add child items
div.appendChild(p);

If you log div in your browser console with console.log(div), you should see the following DOM tree:

Although an Element object can use appendChild() method to add child items to its children, it also defines the append() method which can perform the same task that appendChild() does. In listing 1, if we change the appendChild() method call on line 10 to append(), you will get the same result when you log div with console.log(div) in your browser.

// Calling append() with an Element object produces the same
// result as calling appendChild() with the Element object
div.append(p);

As indicated earlier, calling div.append(p) or div.appendChild(p) in listing 1 above will produce the same result. So, if both methods can perform the same task, then what sets them apart? Let’s find the differences between them.

Differences Between append() and appendChild()

The differences between append() and appendChild() lies in the type of objects that they can add, the number of objects they accept in a single call, and their return value. We will look at their differences based on these three aspects.

1. Parameter Types

Let us consider the differences between append() and appendChild() by considering the type of objects that can be passed to these methods for adding items to children of a parent object.

appendChild() Accepts Node Type Only

In terms of method parameters, appendChild() only takes an object of type Node as an argument in its call. If the object given to appendChild() is not a Node type, then it will not be accepted. Recall that when you create HTML element, the Element object is also a Node object since Element class is derived from Node abstract class. Hence, we can pass HTML element to appendChild(). However, we cannot pass a string object to appendChild() since a string object is not a Node object.

let div = document.createElement('div');
let p = document.createElement('p');
p.innerText = 'An Element object is also a Node object.';

// passing an Element p to appendChild() is accepted
div.appendChild(p);

// Initialise text as string object.
let text = 'appendChild() accepts only objects of type Node.';

// passing a string object to appendChild is not accepted.
// This is because text is not a Node type but rather string
div.appendChild(text);    // this should fail with an error

In listing 3, p is initialised as an Element object. Since Element derives from Node, it implies that p is also a Node object. Therefore, we can pass p as argument to appendChild() on line 7.

On line 10, we initialise text as a string object. Since text is not a Node object, passing it as an argument to appendChild() on line 14 will fail and produce an error. For instance, in Google Chrome browser, you should see an error message in your console similar to the following:

To be able to add text with appendChild(), we will first need to create a Node object for the text by calling createTextNode(), and then pass it as argument to appendChild():

...
// Initialise text as string object.
let text = 'appendChild() accepts only objects of type Node.';

// create Node object for text
let textNode = document.createTextNode(text);

// passing textNode is accepted since it is a Node object
div.appendChild(textNode);

Since textNode is of type Node, appendChild() will gracefully accept it.

append() Accepts Node Type and string Type

Like appendChild(), the append() method also accepts objects of type Node to be added as child items. However, it can also accept objects of type string. In this case, there is no need to create a Node for the text.

let div = document.createElement('div');
let p = document.createElement('p');
p.innerText = 'An Element object is also a Node object.';

// passing an Element p to append() is accepted
div.append(p);

// Initialise text as string object.
let text = 'append() accepts objects of type string.';

// passing a string object to append is accepted.
div.append(text);

As can be seen, the Element p and the the text have been added as children of the parent div with append() method.

appendChild() takes only objects of type Node as argument. On the other hand, append() takes objects of type Node and can take string objects as well.

2. Number of Parameters

Another difference between append() and appendChild() methods is the number of items that can be passed to them to be added as children of the parent object.

appendChild() Accepts Single Item

When adding child items, you can only add one item or element at a time with appendChild(). This means that if you have a list of elements and you need to add to a parent object with appendChild(), then you will have to add them one at a time.

// create a list container
let ul = document.createElement('ul');

// create list items
let li1 = document.createElement('li');
li.innerText = 'List Item 1';

let li2 = document.createElement('li');
li2.innerText = 'List Item 2';

let li3 = document.createElement('li');
li3.innerText = 'List item 3';

// With appendChild(), we will need to add one item at a time
ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);

append() Accepts Multiple Items

When using append() method, we can pass multiple items to be added as children of a parent object in just a single call. This can be done by passing the elements to be added as a comma-separated list of items. For instance, in listing 6, we could just call append() and pass all the items to be added rather than add them one at a time with appendChild().

...
// add all the list items with append() in just a single call
ul.append(li1, li2, li3);

Do you remember that append() accepts string objects as well?. Then, you can even include string objects in the comma-separated list of items passed to append() method:

...
// add all items with append(), including string objects
ul.append(li1, li2, li3, 'List item 4', 'List item 5');

As can be seen, you can have a mix of elements and text in the comma-separated list of items as argument to append().

appendChild() accepts and adds one item at a time. However, append() accepts and adds multiple items in a single call

3. Return Value

A third difference between append() and appendChild() is their return value after completing their task. Whiles appendChild() returns the item that was added, append() does not return a value. If you attempt to check the return value of append(), you will notice that it is undefined.

// create a list container
let ul = document.createElement('ul');

// create list items
let li1 = document.createElement('li');
li.innerText = 'List item 1';

let li2 = document.createElement('li');
li2.innerText = document.createElement('li');

Using listing 9, let us add list items with both append() and appendChild() and see their return value.

// add list item with appendChild() and save return value
let returnValue = ul.appendChild(li1);

// log the return value
console.log(returnValue);

If you log the return value from appendChild() with console.log(returnValue), you should see the following output in your browser console:

We can see that appendChild() returned the Node, in this case the Element object, which it was called to add.

As indicated earlier, append() does not return a value after adding items. If we attempt to save and log return value from append() method, the result will be undefined.

// add list item with appendChild() and save return value
let returnValue = ul.append(li2);

// log the return value
console.log(returnValue);

Logging returnValue with console.log(returnValue) will produce the following in your browsers console:

This is a confirmation that append() does not return any value after adding specified items to children of a parent object.

When appendChild() adds an object, it returns this same object after adding it. However, append() does not return any value after adding an object.

Summary

In javascript, append() and appendChild() are two methods that can be used to add items to children of a parent object. Depending on their usage, both methods can perform the same task. At certain times too, they have different usages which make one method different from the other.

In terms of function parameters, appendChild() can be called to add only a Node object to children of a parent object. However, append() can take a Node object as well as a string object to be added to list of children of a parent object.

When using appendChild(), only one object can be provided to be added to children of a parent object. However, with append() method, we can provide more than one Node or string objects to be added to children of a parent object in just a single call.

When appendChild() is called to add an item, it returns the same object that it added after performing its task. On the other hand, append() does not return any value after performing its task.