頁面底部的動態div-Javascript

Question

我想每次在數據庫中找到新用戶時插入一個新的div。 如果更改CSS（從類中刪除“底部”和“絕對”），則可以使用以下代碼。 問題是它從頂部開始，並且每個div都插入到前一個div的下面。 我希望div位於屏幕的左下角，然后在插入新的div時向上移動。 從本質上講，它將使現有div向上推，而最新的div將位於堆棧的底部。 有關如何執行此操作的任何想法？ 任何幫助，將不勝感激。 謝謝！

此代碼將插入一個新的div，但只是將其放在前一個div的頂部。

.greyBox {
    padding:8px;
    background: grey;
    margin-bottom:8px;
    width:200px;
    height:50px;
    bottom:0;
    position:absolute;
}
.redBox {
    padding:8px;
    background: red;
    margin-bottom:8px;
    width:200px;
    height:25px;
    bottom:1;
    position:absolute;
}

<p>
  <button id="after">New User</button>
  <button id="reset">reset</button>
</p>

<div class="greyBox">Users</div>

$("#after").click(function () {
     $('.greyBox').after("<div class='redBox'>User 1</div>");
});

$("#reset").click(function () {
     location.reload();
});

http://jsfiddle.net/ymTtB/

Answer 1

添加一個帶有“底部”類的新div容器http://jsfiddle.net/4np4q/

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
    .bottom{
    position: absolute;
    bottom: 0;     
    }
    .greyBox{
        padding:8px;
        background: grey;
        margin-bottom:8px;
        width:200px;
        height:50px;

    }

    .redBox{
        padding:8px;
        background: red;
        margin-bottom:8px;
        width:200px;
        height:25px;
    }
</style>

</head>
<body>

  <p>
  <button id="after">New User</button>
  <button id="reset">reset</button>
  </p>

  <div class="bottom">
    <div class="greyBox">Users</div>
</div>
<script type="text/javascript">

    $("#after").click(function () {
      $('.greyBox').after("<div class='redBox'>User 1</div>");
    });

    $("#reset").click(function () {
      location.reload();
    });

</script>
</body>
</html>

Answer 2

這是您的position: absolute .redbox position: absolute ：

.greyBox {
    padding:8px;
    background: grey;
    margin-bottom:8px;
    width:200px;
    bottom:0;
    position:absolute;
}

.redBox {
    padding:8px;
    background: red;
    margin-bottom:8px;
    width:200px;
    height:25px;
}

另外，我想象您正在嘗試添加到.greyBox元素，而不是添加到它之后。

$("#after").click(function () {
     $('.greyBox').append("<div class='redBox'>User 1</div>");
});

$("#reset").click(function () {
     $('.greyBox').children().remove();
});

http://jsfiddle.net/Bb6am/

如果您確實想要greyBox .after() greyBox ，則需要使用包裝器並將“ bottom”樣式應用於它：

.users {
    width:200px;
    bottom:0;
    position:absolute;
}
.greyBox {
    padding:8px;
    background: grey;
    margin-bottom:8px;
}

<p>
  <button id="after">New User</button>
  <button id="reset">reset</button>
</p>

$("#after").click(function () {
     $('.greyBox').after("<div class='redBox'>User 1</div>");
});

$("#reset").click(function () {
     $('.users').children().not('.greyBox').remove();
});

http://jsfiddle.net/Bb6am/2/

頁面底部的動態div-Javascript

問題描述

2 個解決方案

解決方案1
1 已采納 2012-03-03 15:12:39

解決方案2
0 2012-03-03 15:09:26

頁面底部的動態div-Javascript

問題描述

2 個解決方案

解決方案1 1 已采納 2012-03-03 15:12:39

解決方案2 0 2012-03-03 15:09:26

解決方案1
1 已采納 2012-03-03 15:12:39

解決方案2
0 2012-03-03 15:09:26