I have to edit a website using just vanilla javascript. I have to overlay a dropdown menu with a CTA button that when pressed activates said menu.

I tried hiding the dropdown menu by setting css property to hidden, and added a button with "on click" event to make the menu visible again (all of this on Chrome dev console), but when adding the button element to document body it appends at the very end of page.

I tried using insertBefore but i cannot get it to work that way. Any better suggestions/help on how to approach this problem , or what I'm doing wrong in the insertBefore statement would be greatly appreciated.

const btn = document.createElement('Button');
btn.innerText='BUTTON';
btn.addEventListener('click',() =>{ BookingFormContent.style.visibility = 'visible';}); 
document.body.insertBefore(BookingForrm,btn);

error statement that follows is :

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. at :1:15

this is my first time messing with DOMs, so i might not be doing stuff right somewhere else.