how to generate a div on the top of the page from javascript after the page is loaded?

Question

I am trying to generate a div element in the corner of the screen from a bookmarklet.

I tried

var newdiv = document.createElement('div');
newdiv.id="blabal";
newdiv.style.background = "#00C";
newdiv.style.border = "4px solid #000";
newdiv.style.width=300;
newdiv.style.heigth=200;
newdiv.style.position="fixed";
newdiv.style.top="20";
document.body.appendChild(newdiv);

to now avail.

Thanks.

Answer 1

You need to provide px with the values, and you got a typo in heigth :

var newdiv = document.createElement('div');
newdiv.id="blabal";
newdiv.style.background = "#00C";
newdiv.style.border = "4px solid #000";
newdiv.style.width="300px";
newdiv.style.height="200px";
newdiv.style.position="fixed";
newdiv.style.top="20px";
document.body.appendChild(newdiv);

example: http://jsfiddle.net/niklasvh/gy9XJ/

Answer 2

This is mostly accurate, but you have a typo in height and you need to provide units for width , height and top . I'm assuming pixels, but the interpreter won't be so kind; 200 could be in ems, pixels, points, percents ( 200em , 200px , 200pt and 200% , respectively):

var newdiv = document.createElement('div');
newdiv.id="blabal";
newdiv.style.background = "#00C";
newdiv.style.border = "4px solid #000";
newdiv.style.width="300px";
newdiv.style.height="200px";
newdiv.style.position="fixed";
newdiv.style.top="20px";
document.body.appendChild(newdiv);