Чат на JS — как сделать вывод сообщений?

Question

[rena-nip]

Делаю простенький чат на JS+PHP. Верстка - Bootstrap.

Так выглядит HTML:

<div class="portlet-body" id="chats">
<div class="scroller" style="height: 341px;" data-always-visible="1" data-rail-visible1="1">
<ul class="chats">
    <li class="in">
	<img class="avatar" alt="" src="assets/admin/layout/img/avatar1.jpg"/>
	<div class="message">
	<span class="arrow"></span>
	<a href="javascript:;" class="name">Name</a>
	<span class="datetime">Date</span>
	<span class="body">Message</span>
	</div>
   </li>
</ul>
</div>
   <div class="chat-form">
	<div class="input-cont">
		<input class="form-control" type="text" placeholder="Ваше сообщение..." id='usersay'/>
	</div>
	<div class="btn-cont">
	       <span class="arrow"></span>
	       <button class="btn blue icn-only" id='usersay' onclick='show();'>
	            <i class="fa fa-check icon-white"></i>
	        </button>
	</div>
</div>
</div>

Каждое сообщение - .

Есть функция обработчик на JS:

var id = 0;
        function show()  
        {  
        	var usersay = document.getElementById("usersay").value;
            $.ajax({  
            	url: "reply.php",
            	cache: false,
            	type: "POST",
        	data: {usersay:usersay},  
                success: function(html){
                var div = document.createElement('div');
                div.setAttribute("id", 'msg'+id++);
		div.innerHTML = html;
		var elements = div.childNodes;
		document.body.appendChild(div);
                $('msg'+id).html(html);  
                }  
            });  
        }

И есть небольшой PHP-скрипт:

<?php 
$usersay = trim(strip_tags($_POST['usersay']));
$username = 'Вы';
$time = date('H:i:s');

$reply = '<li class="in">
		<img class="avatar" alt="" src="assets/admin/layout/img/avatar1.jpg"/>
		<div class="message">
			<span class="arrow"></span>
			<a href="javascript:;" class="name">'.$username.'</a>
			<span class="datetime">'.$time.'</span>
			<span class="body">'.$usersay.'. </span>
		</div>
	</li>';

echo $elem;
?>

Я понимаю, что мой код на JS хуже, чем просто кошмарный, ибо в JS я не волоку. Подскажите, пожалуйста, как заставить JS-функцию создавать новый в самом окне чата, а не просто на странице?

Заранее спасибо!

Comments

[OVK2015]

Зачем вы чистый js c jQuery мешаете? Начали jQuery использовать,- ну так и пользуйтесь дальше. Внутри success добавьте
$('.chats').append($(html));

[rena-nip]

OVK2015: спасибо!

[OVK2015]

rena-nip: Не за что!

Answer 1

[trushka]

Я так понимаю, у вас там, судя по $.ajax(), jQuery подключен?

var id = 0;
function show()  {  
  var usersay = document.getElementById("usersay").value;
  $.ajax({  
      url: "reply.php",
      cache: false,
      type: "POST",
      data: {usersay:usersay},  
      success: function(html){
                $('.chats').append(html)
      }  
  });  
}