如何使用jquery附加动态div？

Question

我想在每次单击按钮时创建一些动态div。 如果顶部已经有该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>