javascript - 如何使用 jquery 附加动态 div？

Question

我想在每次单击按钮时创建一些动态 div。如果顶部已经有这样的 div，则下一个这样的 div 将显示在所有这些 div 的下方，但如果没有，则这个新的 div 将从顶部开始。

此外，添加五秒后，每个 div 应该自行消失，并且该消失的 div 下面的所有 div 都应该向上？

这是我的代码:

 $("body").append("<div style='position:
 absolute;top:0;right:0'     
 class='dynamic alert-danger'>something wrong!!!!</div>");
setTimeout(function() {
 $('.dynamic').fadeOut('fast');
 }, 5000);

Answer 1

var bubbleCounter = 0;
$("#add-bubble").on("click", function(e){
  e.preventDefault();
  var counter = bubbleCounter + 1;
  var htmlString = '<div class="bubbles" id="bubble-'+counter+'">'+counter+'</div>';
  $("#bubbles-container").append( htmlString );
  setTimeout(function(){
    $("#bubble-"+counter).remove();
  }, 3000 );
  bubbleCounter = counter;
});//#add-bubble click()

body{
  position: relative;
}
#bubbles-container{
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}
#bubbles-container .bubbles{
  color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: orange;
  line-height: 100px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bubbles-container"></div>
<button id="add-bubble">Add bubble</button>