loading...

append VS appendChild

ibn_abubakre profile image Abdulqudus Abubakre ・2 min read

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>
// Inserting a DOMString
const parent = document.createElement('div');
parent.append('Appending Text');
// The div would then look like this <div>Appending Text</div>

.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>
// 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'

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

Posted on by:

ibn_abubakre profile

Abdulqudus Abubakre

@ibn_abubakre

Front end developer, JavaScript enthusiast, Community Builder

Discussion

markdown guide
 

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
 
 

happy to contribute by writing one if you need :)

 

Very consice and clear explanation, thanks!

 
 

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

 
 
 
 

This is helpful, thanks boss!