When to use Alert appendToBody

Can you give me some examples of when to use the appendToBody option? In particular when using the Alerts API. If the DOM element is already in the body why is there an option to move it to the end of the body?

Second question is do we need to have a DOM element just to display an alert? Is there no way of just using javascript to display an alert like mdb.Alert.show('some alert text', options); and have MDB create the DOM element on the fly and remove the element from the DOM after the delay? Why would we need to first create and insert a DOM element then create an instance then call the show() method then manually remove it from the DOM??? I think I'm missing the obvious. I'm very new to MDB and Bootstrap so go easy on me.

Here is what I'm doing currently but it seems to be a lot of overhead just to display a simple phrase.

var alert = '<div id="addFavoriteSuccess" class="alert fade" data-mdb-color="success" data-mdb-position="top-left" data-mdb-autohide="true" data-mdb-delay="2000" data-mdb-hidden="true" role="alert"><i class="fas fa-check-circle me-3"></i>' + response.message + '</div>';
$('main').append(alert);
mdb.Alert.getOrCreateInstance(document.getElementById('addFavoriteSuccess')).show();
setTimeout(function() {
     $('#addFavoriteSuccess').remove();
}, 3000);

Thanks!