每次插入循环后如何断开div

Question

Actually each time I press the button it should show some thing like in facebook chat box to show new message but instead on each click the new message does not go in the downward but instead it comes next to it.

<script>
$(document).ready(function() {
    $('#im_chat').click(function() {
        var a = $('#im_textarea').val();

        alert("It is working!!!!");
        $('#im_popup')
            .append($('<p CLASS="well well-sm" id="msg"></p>')
            .css('margin', '10px')
            .css('display', 'inline-block')
            .text(a));
    })
})
</script>

Answer 1

Don't use display: inline-block; , just show each message in a <div> or any other element displayed as a block :

 $(document).ready(function() { $('#im_chat').click(function() { var a = $('#im_textarea').val(); var $message = $('<div />') .css({ margin: '10px' }) .text(a); $('#im_popup').append($message) }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="im_popup"></div> <textarea id="im_textarea"></textarea> <div> <button id="im_chat">Send</button> </div>