如何使用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 .