挿入のループごとに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>