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

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

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

Answer 1

您可以使用您创建的元素并添加类名称，如下所示：

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>聊天列表

2 个答案: