.append vs .appendChild in JS

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.