Apply CSS to dynamically generated <li> for chat list

Question

I am designing a chat list to which I want to bind the query and response to <li> dynamically. Here is the static HTML for <ul> and <li>.

<ul id="chat" class="panel-body msg_container_base">
      <li id="chatResponse" class="row msg_container base_receive">
        <div class="col-md-2 col-xs-2 avatar text-center">
          <img class="bdr-rds" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive ">
          <time datetime="2009-11-13T20:00">11:40</time>
        </div>
        <div class="col-md-10 col-xs-10 arrow-left">
          <div class="messages msg_receive">
            <p id="response">Hello Welcome. I can answer your questions</p>
          </div>
        </div>
      </li>
      <li id="userQuery" class="row msg_container base_sent ">
        <div class="col-md-10 col-xs-10 arrow-right">
          <div class="messages msg_sent">
            <p id="query" class="blockColor">What are my details?</p>                    
          </div>
        </div>
        <div class="col-md-2 col-xs-2 avatar text-center">
          <img class="bdr-rds" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-1.jpg" class=" img-responsive ">
          <time datetime="2009-11-13T20:00">11:40</time>
        </div>
      </li>
    </ul>

I am creating a JavaScript to bind the response like such:

$scope.createQueryNode = function (query) {
  console.log("Inside create node" + query);
  var ul = document.getElementById("chat");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(query));
  ul.appendChild(li);
}

I want to append the data for <p> in <li>, for ex: id="query" with all the CSS applied.

Do I need to use .addClass? If yes, how can I dynamically create the <li> item with all the CSS applied?

Answer 1

I have used the jquery clone to clone the li and append it to the ul. Did something like this:

var ul = document.getElementById("chat");
    var li = document.getElementById("chatResponse");
    var uid = $(this).uniqueId();
    var $klon = $(li).clone().prop('id', uid);
    $($klon).find('p').empty().append(response);
    $klon.appendTo(ul);
    $(ul).scrollTop($('ul li:last-child').position().top);