如何通过jQuery或Javascript添加绝对位置的元素？

Question

我有这条线添加一个新的元素在屏幕上，但绝对位置不起作用。

的Javascript

function drawElement(e,name){ 
    $("#canvas").append("<div id='" + name + "' class='element'" 
    + "left="+e.pageX+" top=" + e.pageY +">" 
    + name 
    +"</div>"); 
} 

CSS

.element{ 
    display:inline-block; 
    background:blue; 
    position:absolute; 
} 

我做错了什么？

1. 列表项

Answer 1

function drawElement(e,name){ 
     div = $("<div />") 
      div.attr("id", name); 
      div.attr("class", 'element') 
      div.css("top", e.pageY) 
      div.css("left", e.pageX) 
      div.html(name) 

      $("#canvas").append(div) 
    } 

更新：从下面的评论（不知道你能做到这一点！）:)

function drawElement(e,name){ 
     div = $("<div />") 
     div.attr({id: name, class: 'element'}); 
     div.css({top: e.pageY, left: e.pageX}) 
     div.html(name) 
       $("#canvas").append(div) 
    } 

Answer 2

var element = $('<div />',{'name': name, 'class': element}) 
          .css({ 'left': e.pageX, 'top': e.pageY }) 
          .html(name); 
$("#canvas").append(element); 

Answer 3

写的顶部和左侧位置到样式属性，像这个 - >

.append("<div id='" + name + "' class='element'" 
+ "style='left:"+e.pageX+";top:" + e.pageY +";'>" 

虽然你应该像这样做，使它更可控...

var newElem = $('<div />').addClass('element').css({'left': e.pageX, 'top' : e.pageY}); 

$("#canvas").append(newElem);