Повторяющий html при обработке данных

Вот, есть такой javascript код:

  function updateChat(){
    $.ajax({
      url : "http://localhost/kiosl/rooms/default/protected/models/chat-server.php",
      type : "get",
      data : "last_displayed_chat_id="+$('#last_displayed_chat_id').val(),
      dataType : "json",
      success : function(response , status , http){
        $.each(response, function(index,item){
      document.getElementById("kiosl_chat_box").innerHTML += "<li class='friend'>  <div class='friend-msg-wrap'>  <img class='user-img img-circle block pull-left'  src='../dist/img/user.png' alt='user'/>  <div class='msg pull-left'>  <p>" + item.user_comment +"</p>  <div class='msg-per-detail text-right'>  <span class='msg-time txt-grey'>" + item.user_name + "</span>  </div>  </div>  <div class='clearfix'></div>  </div>  </li>";
        });
      },
      error : function(http, status, error){
        alert('Some Error occured : '+error);
      }
    });
  }
 updateChat();
  setInterval(updateChat, 1000);

И вот в чём проблема: каждый раз в kiosl_chat_box за 1 сек. добавляется html код:

<li> Бла Бла бла </li>

Вопрос: как сделать что бы повторяющийся код не добавлялся.

P.S. Мой "опыт" javascript уже поделен на 0.