将 CSS 应用于动态生成的 <li> 聊天列表

Question

我正在设计一个聊天列表，我想将查询和响应动态绑定到 <li>。这是 <ul> 和 <li> 的静态 HTML。

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

我正在创建一个 JavaScript 来绑定这样的响应：

$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);
}

我想在 <li> 中附加 <p> 的数据，例如：id="query" 应用了所有 CSS。

我需要使用 .addClass 吗？如果是，我如何动态创建应用了所有 CSS 的 <li> 项目？

Answer 1

您可以使用您创建的元素并添加 class 名称或这样的名称：

li.className = "blockColor"

或

li.className = "col-md-2 col-xs-2 avatar text-center"

Answer 2

我已经使用 jquery 克隆克隆了 li 并将其附加到 ul。做了这样的事情：

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);

将 CSS 应用于动态生成的 <li> 聊天列表

Apply CSS to dynamically generated <li> for chat list

html

javascript

css

jquery

stylesheet