每次插入循環后如何斷開div

Question

實際上，每次我按下按鈕時，它都應該在Facebook聊天框中顯示一些內容，以顯示新消息，但是每次單擊時，新消息都不會向下顯示，而是緊隨其后。

<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

不要使用display: inline-block; ，只需將每個消息顯示在<div>或任何其他顯示為塊的元素中：

 $(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>