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()
- 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 typeNode
as argument. On the other hand,append()
takes objects of typeNode
and can takestring
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.