What's the difference between .append and .appendChild?
The distinction has robbed me of a couple of hours so here's to hopefully saving you a little bit of time.
First of all, we can see the full functions at MDN:
Element.append(), inserts a set of Node objects or DOMString objects after the last child of the Element
Node.appendChild(), adds a node to the end of the list of children of a specified parent node
.append can work with multiple Node or DOMString objects and must be called on an element, whereas .appendChild can only add a single Node to a parent Node and cannot work with DOMstrings.
Another distinction is that .appendChild actually returns the child element so it cannot be used in a function chain, while .append returns nothing and thus can be chained.
Lastly, .append is the more general method and can produce the same functionality as .appendChild, which serves a more specific purpose.
Top comments (0)