jquery - Adding another div dynamically pushes all scrolls of previous divs up -

my html looks this:

<div id="main">   <div style="height:200px; width:100px; overflow:scroll; display:inline-block;">     hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>   </div> </div> <input type="submit" id="clickme" /> 

and jquery looks this:

$('#clickme').on('click', function() {      $('#main').html($('#main').html() + '<div style="height:200px; width:100px; overflow:scroll; display:inline-block;"> hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/></div>');   }); 

this live example here.

when scroll down first div , click submit, should add div right of not scroll first div up. took me ages realize problem was, thought share it.

the solution quite simple though. adding controls html wrong way. should have done using insertafter function in jquery this:

$('#clickme').on('click', function() {     $('<div style="height:200px; width:100px; overflow:scroll; display:inline-block;">   hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  hi<br/>  </div>')     .insertafter($('#main').children().last());   }); 

as shown in link.