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

【问题标题】：How can I add an element with absolute position via jQuery or Javascript?如何通过 jQuery 或 Javascript 添加具有绝对位置的元素？
【发布时间】：2011-10-08 23:03:57
【问题描述】：

我有这一行要在屏幕中添加一个新元素，但是绝对位置不起作用。

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;  
}

我做错了什么？

列表项

【问题讨论】：

你能举一个你得到的输出与你期望的输出相比的例子吗？当前行为的工作示例也会有所帮助。

标签： javascript css css-position

【解决方案1】：

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

【讨论】：

这可以浓缩，有很多方法可以做到，但它给了你想法。

【解决方案2】：

    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)
    }

【讨论】：

您可以将哈希与 .attr 和 .css 一起使用
你也可以链接 appendTo :)

【解决方案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);

【讨论】：