0
353
ViewsWhy does prepend() javascript method not work?
I'm practicing with DOM manipulation in JavaScript following a course.
I wriote the same code as the guy of the course but it doesn't work. The code should create an html element and add it to the DOM and it does, but the element is not showing in the page. Besides, if I open the inspector tool the element is there but is greyed out like when you put display:none ... it's 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>I am using FireFox as browser and I saw on MDN documentation about Element.prepend() that it is fully supported by FireFox but for me is not working...
Then I tried on Chrome and it works.
Someone can help me out? Am I missing something?
·
Juan Pablo Isaza
Answer question