use .appendChild(DocumentFragment) vs .append(...[DomElement,...])

Question

The MDN docs say:

Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately.

So

const el1 = document.createElement('div');
const el2 = document.createElement('div');
const df = document.createDocumentFragment();
df.appendChild(el1);
df.appendChild(el2);
document.body.appendChild(df);

is better than

const el1 = document.createElement('div');
const el2 = document.createElement('div');
document.body.appendChild(el1);
document.body.appendChild(el2);

But what about using append ? Is append as efficient as using documentFragment?

const el1 = document.createElement('div');
const el2 = document.createElement('div');
document.body.append(el1,el2);