Difference between append and appendChild method

June 20, 2020

append

Using append you can append an Element (Node or DOMString) to the DOM.

Append Element

let parent = document.createElement('div');
let child = document.createElement('p');

parent.append(child);
parent.append('Inserting Text(DOMString)');

Adding multiple Element

let parent = document.createElement('div');
let child1 = document.createElement('p');
let child2 = document.createElement('span');

parent.append(child1, child2);

appendChild

Using appendChild you can only append a Node.

let parent = document.createElement("div");
let child = document.createElement("p");

parent.appendChild(child);

When you try to add String to the appendChild, then it will throw error

parent.appendChild("test");//parameter 1 is not of type 'Node'.

The appendChild method returns the Node which is appended

let parent = document.createElement("div");
let child = document.createElement("div");

let addedChild = parent.append(child);
console.log(addedChild);// <span></span>

Using appendChild you can only append only one Node in single method call


Summary

append appendChild
You can add Node & DOMString Supports only Node addition
No return value Returns the appended Node
Support multiple Element append Only one element can be appended

Please donate here, for making more tutorials.