How do I position a character at a specific coordinate in a page with JavaScript

Question

I tried this code:

var span = document.createElement('span')
span.style.position = 'absolute'
span.style.color = 'red'
span.style.left = 100
span.style.top = 100
span.innerHTML = '*'
document.body.insertBefore(span, document.body.firstChild)

But this code still positions the asterisk at coordinate (0, 0) instead of (100, 100). Here is a jsfiddle URL: http://jsfiddle.net/E5NDV/

Could you please help me in getting this right?

Answer 1

var span = document.createElement('span')
span.style.position = 'absolute'
span.style.color = 'red'
span.style.left = "100px"
span.style.top = "100px"
span.innerHTML = '*'
document.body.insertBefore(span, document.body.firstChild)

http://jsfiddle.net/E5NDV/1/

Answer 2

The values for left and top should be a String giving a number and a unit, eg px for pixels , ie '100px' . Which child the node is appended as does not matter so much for absolute positioning as this information is not used to decide where to position it, using appendChild would work just as well as insertBefore .