DEV Community

Abdulqudus Abubakre
Abdulqudus Abubakre

Posted on

append VS appendChild

This is the first post in the this vs that series. A series aimed at comparing two often confusing terms, methods, objects, definition or anything frontend related.

append and appendChild are two popular methods used to add elements into the Document Object Model(DOM). They are often used interchangeably without much troubles, but if they are the same, then why not scrape one....Well they are only similar, but different. Here's how:

.append()

This method is used to add an element in form of a Node object or a DOMString (basically means text). Here's how that would work.

// Inserting a Node object
const parent = document.createElement('div');
const child = document.createElement('p');
parent.append(child);
// This appends the child element to the div element
// The div would then look like this <div><p></p></div>
Enter fullscreen mode Exit fullscreen mode
// Inserting a DOMString
const parent = document.createElement('div');
parent.append('Appending Text');
// The div would then look like this <div>Appending Text</div>
Enter fullscreen mode Exit fullscreen mode

.appendChild()

Similar to the .append method, this method is used to elements in the DOM, but in this case, only accepts a Node object.

// Inserting a Node object
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);
// This appends the child element to the div element
// The div would then look like this <div><p></p></div>
Enter fullscreen mode Exit fullscreen mode
// Inserting a DOMString
const parent = document.createElement('div');
parent.appendChild('Appending Text');
// Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
Enter fullscreen mode Exit fullscreen mode

Differences

  1. .append accepts Node objects and DOMStrings while .appendChild accepts only Node objects

    const parent = document.createElement('div');
    const child = document.createElement('p');
    // Appending Node Objects
    parent.append(child) // Works fine
    parent.appendChild(child) // Works fine
    // Appending DOMStrings
    parent.append('Hello world') // Works fine
    parent.appendChild('Hello world') // Throws error
    
  2. .append does not have a return value while .appendChild returns the appended Node object

    const parent = document.createElement('div');
    const child = document.createElement('p');
    const appendValue = parent.append(child);
    console.log(appendValue) // undefined
    const appendChildValue = parent.appendChild(child);
    console.log(appendChildValue) // <p><p>
    
  3. .append allows you to add multiple items while appendChild allows only a single item

    const parent = document.createElement('div');
    const child = document.createElement('p');
    const childTwo = document.createElement('p');
    parent.append(child, childTwo, 'Hello world'); // Works fine
    parent.appendChild(child, childTwo, 'Hello world');
    // Works fine, but adds the first element and ignores the rest
    

Conclusion

In cases where you can use .appendChild, you can use .append but not vice versa.

That's all for now, if there are any terms that you need me to shed more light on, you can add them in the comments section or you can reach me on twitter

Discussion (17)

Collapse
ronakjethwa profile image
Ronak Jethwa

Nice one! Few more suggestions for the continuation of the series!

1. Call vs Apply
2. Prototype vs __proto__
3. Map vs Set
4. .forEach vs .map on Arrays
5. for...of vs for...in
Enter fullscreen mode Exit fullscreen mode
Collapse
ibn_abubakre profile image
Abdulqudus Abubakre Author

Sure, will do that. Thanks

Collapse
ronakjethwa profile image
Ronak Jethwa • Edited on

happy to contribute by writing one if you need :)

Collapse
heytulsiprasad profile image
Tulsi Prasad

Very consice and clear explanation, thanks!

Collapse
ibn_abubakre profile image
Abdulqudus Abubakre Author

Glad I could help

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

It would be nice if you also compare the speed / efficiency.

Collapse
sadiqful profile image
Aliyu Abubakar

This is straightforward

Collapse
ibn_abubakre profile image
Abdulqudus Abubakre Author

Thanks man

Collapse
mmestiyak profile image
mmestiyak

Thanks man!

Collapse
damilolaaaron profile image
dAMi

This is helpful, thanks boss!

Collapse
abdohassan profile image
Abdelrahman Hassan

Excellent explanation

Collapse
mmimonir profile image
Md. Monirul Islam

Thanks man!

Collapse
anthoniaokafor profile image
Anthonia Okafor

Well explained

Collapse
ibn_abubakre profile image
Abdulqudus Abubakre Author

Thanks Anthonia

Collapse
ben profile image
Ben Halpern

Very clear guide

Collapse
ibn_abubakre profile image
Abdulqudus Abubakre Author

Thanks a lot Ben :)

Collapse
navin_moorthy profile image
Navin

Very well explained !!