Tengo que editar un sitio web usando solo javascript de vainilla. Tengo que superponer un menú desplegable con un botón CTA que cuando se presiona activa dicho menú.

Intenté ocultar el menú desplegable configurando la propiedad css en hidden , y agregué un botón con el evento "al hacer clic" para que el menú volviera a ser visible (todo esto en la consola de desarrollo de Chrome), pero al agregar el elemento del botón al cuerpo del documento, se agrega al final de la página.

Intenté usar insertBefore pero no puedo hacer que funcione de esa manera. Cualquier sugerencia/ayuda mejor sobre cómo abordar este problema, o lo que estoy haciendo mal en la instrucción insertBefore , sería muy apreciada.

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

declaración de error que sigue es:

DOMException no detectada: no se pudo ejecutar 'insertBefore' en 'Node': el nodo antes del cual se insertará el nuevo nodo no es un elemento secundario de este nodo. a las :1:15

esta es la primera vez que me meto con los DOM, por lo que es posible que no esté haciendo las cosas en otro lugar.