如何使用jquery和javascript将html元素向左移动

Question

我的html中有一个按钮。点击它我想在按钮之前插入一个绿色框（“div”）。在jquery中有没有办法做到这一点？我写了下面的代码，但它没有用。新元素出现在我的按钮上。

click: function () {
    var oldLeft = parseInt($('#addButton').css('left'));
    var newFU = $('<div class="fu"></div>');
    newFU.insertBefore("#addButton");
    var newLeft=  oldLeft + newFU.width();
    $("#addButton").css("left",  newLeft);
    $(this).dialog("close");
}

相关的css是这样的：

div .fu {
    width: 50px;
    height: 50px;
    background-color: #19833F;
    position: absolute;
    color: white;
    text-align: center;
    vertical-align: middle;
}
.addButton{
    font-weight: bolder;
    background-color: white;
    color: #20ff5c;
    font-size: 18px;
    left: 20px;
}

Answer 1

我通过定义具有相对位置的按钮来解决问题：

addButton{
    font-weight: bolder;
    background-color: white;
    color: #20ff5c;
    font-size: 18px;
    left: 10px;
    position: relative;
}