js 在父元素里添加红色的div ,而且每次都是第一个

<style>
.leftdiv {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px 20px;
float: left;
}
.btn {
margin: 56px;
width: 80px;
height: 35px;
}

</style>

 

 

 

<script>
$(document).ready(function () {
var i = 0;//计数
$(".btn").click(function () {
var html = '<div style="width:200px; height:200px; border:1px solid red;margin-bottom:20px;float: left;margin: 20px 20px; class="ABCD">我是第' + i + '个</div>';
i++;
$(".ABCD").prepend(html);
});
});
</script>

<div class="main">
<div class="leftdiv">
<input type="button" value="添加" class="btn" />
</div>
<div class="ABCD">

</div>
</div>