appendmethod is used to insert either Node objects or DOMStrings (basically a string or text) into the DOM, while the
appendChildmethod can only be used to insert Node objects into the DOM.
For example, with the
append method, you can do:
let div = document.createElement("div") //insert a DOM node let p = document.createElement("p"); div.append(p); console.log(div) ////insert a DOMString div.append(‘
Hello’) console.log(div) //
let div = document.createElement("div") //insert a DOM node let p = document.createElement("p"); div.appendChild(p); console.log(div) ////insert a DOMString div.appendChild(‘
Hello’) //This results in an Uncaught TypeError: Failed to execute 'appendChild' on 'Node'
appendmethod can insert multiple items at once, but the
div.append(child, childTwo); // Works fine div.appendChild(child, childTwo,); // Works fine, but adds the first element and ignores the rest
- According to caniuse, the
appendmethod is not supported in IE.
appendChild can be used interchangeably with append, but not vice versa.
Blog Credits: Linda Ikechukwu