절대 위치가 jQuery 또는 Javascript를 통해 요소를 추가하려면 어떻게해야합니까?

Question

이 줄을 사용하여 화면에 새 요소를 추가했지만 절대 위치가 작동하지 않습니다.

자바 스크립트

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

, 스타일 속성에 위쪽 및 왼쪽 위치를 쓰기 당신은, 그래서 같이 그것을 아마해야하지만 this->

.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);