how can I append dynamic div using jquery?

Question

I want to create some dynamic div on each click of a button. If there is already such div at the top, the next such div will show below all of them but if there is none, this new div will start from top.

Also, after five seconds of adding, each div should vanish itself and all divs below this vanishing div should come upwards?

Here is my code:

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

Er... Sorry your English isn't clear. Would you like to rephrase or explain in a different way? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jul 3, 2017 at 16:44
Why does the code you posted not working? Post a fiddle/plnk please. — Abhi
– Abhi, Commented Jul 3, 2017 at 16:46
two problems of that code.the first one is the divs are not showing sequentially it replaces the previous one and after 5 seconds all the div removes — Abdur Rahman
– Abdur Rahman, Commented Jul 3, 2017 at 16:54

Mohit Bhardwaj · Accepted Answer · 2017-07-03 16:55:09Z

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>

answered Jul 3, 2017 at 16:55

Mohit Bhardwaj

10.1k7 gold badges41 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdur Rahman Over a year ago

thank's a lot Mohit bro exacty same what I'm wanting.

Collectives™ on Stack Overflow

how can I append dynamic div using jquery?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related