如何使用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>