Create <div> and append <div> dynamically

Create <div> and append <div> dynamically

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <div id="maindDivBox">
        <div id="mainCommentBox"></div>
        <textarea id="txtComment"></textarea>
        <input type="button" value="Comment" id="btnComment" />
    </div>

CSS

html, body {font-family: Calibri;font-size: 9px;margin-top: 10px;}
#maindDivBox {width: 300px;height: 400px;margin: 0 auto;}
#mainCommentBox {width: 100%;height: 200px;margin-bottom: 20px;display: block;border: 1px solid #2795EE;overflow: auto;}
.childCommentBox {width: 100%;font-size: 12px;min-height: 20px;padding: 5px 0;margin-bottom: 5px;border-top: 1px solid #ddd;}
#txtComment {width: 98%;margin: 10px auto;border: 1px solid #2795EE;resize:none;height: 50px;}
#btnComment {background: #f2f2f2;padding: 5px 20px;cursor:pointer;border: 1px solid #2795EE;}
#btnComment:hover{border: 1px solid #221B94;color:#2795EE;}

JavaScript

$(document).ready(function () {

 $('#btnComment').click(function () {
  $('#mainCommentBox')
    .add('<div class="childCommentBox">' + $('#txtComment').val() + '</div>')//Div is dynimcally added
    .animate({ scrollTop: $('#mainCommentBox').prop("scrollHeight") }, 500);//scroll to last div
  $('#txtComment')
    .val("")
    .focus();
});});