DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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

Top comments (20)

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
 
frugodwill profile image
Frupreneur

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

well if you do need that return value, appendChild does the job while .append doesnt

Collapse
 
damilolaaaron profile image
dAMi

This is helpful, thanks boss!

Collapse
 
abdohassan profile image
Abdelrahman Hassan

Excellent explanation

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
 
mmimonir profile image
Md. Monirul Islam

Thanks man!

Collapse
 
navin_moorthy profile image
Navin

Very well explained !!

Collapse
 
lottiealaniz profile image
LottieAlaniz

What is the difference between innerHTML and appendChild? husband vashikaran mantra in Hindi

Collapse
 
molenamo profile image
MLM

I UNDERSTAND, FINALLY! New to JavaScript and DOM Manipulation, this was perfect, clear, concise! Thank you!

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post