Estoy practicando con la manipulación de DOM en JavaScript siguiendo un curso.
Escribo el mismo código que el chico del curso pero no funciona. El código debe crear un elemento html y agregarlo al DOM y lo hace, pero el elemento no se muestra en la página. Además, si abro la herramienta de inspección, el elemento está ahí, pero está atenuado como cuando pones display:none ... es invisible... 
const header = document.querySelector('.header'); const message = document.createElement('div'); message.classList.add('cookie-message'); message.innerHTML = 'We use cookies for improved functionality and analytics. <button class="btn btn--close-cookie">Got it!</button>'; header.prepend(message); .header { padding: 3em; height: 100vh; display: flex; flex-direction: column; align-items: center; } .cookie-message { display: flex; align-items: center; justify-content: space-evenly; width: 100%; background-color: white; color: #bbb; font-size: 1.5rem; font-weight: 400; } <!DOCTYPE html> <html lang="en"> <head> </head> <body> <header class="header"> </header> </body> </html> Estoy usando FireFox como navegador y vi en la documentación de MDN sobre Element.prepend() que es totalmente compatible con FireFox pero para mí no funciona...
Luego probé en Chrome y funciona.
¿Alguien puede ayudarme? ¿Me estoy perdiendo de algo?