Getting an uncaught typerror and don't know why

Question

I am struggling with a little javascript.

I have these four lines:

var footer = document.getElementById('footer');
var cookieBanner = document.createElement('div');
cookiebanner.className = "cookieBanner";
footer.appendChild(cookiebanner);

But in console I get

Uncaught TypeError: Cannot read property 'appendChild' of undefined

If I do the same in console, it works. Why would that be?

Answer 1

var footer = document.getElementById('footer'); is returning undefined. Therefore when you try and call appendChild on undefined, you get:

Uncaught TypeError: Cannot read property 'appendChild' of undefined

If there is an element with that ID on your page, make sure your page is being rendered before this script is being ran.