JQuery 克隆 li+children，更新文本（在 child 标签中），并追加

Question

我有一些非常酷的 CSS，我想在 <ul> 中重复使用。我想克隆一个现有的 <li>（以便我可以重复使用 CSS），更新一个  字段，然后将其附加到 <ul>.[= 的末尾25=]

我知道我可以做这样的事情来找到...

var temp = $(".chatboxcontent").find('li');
console.log(temp);

然后我可以像这样使用 .clone...（正确吗？）

var temp2 = temp.clone

所以我需要删除一个  然后插入我自己的 

HTML 元素看起来像这样...

<div class="chatboxcontent">
        <li class="current-user-message">
    <div class="avatar">
      <img src="http://placehold.it/50x50">
    </div>
    <div class="chatboxmessagecontent">
      <p>test</p>
      <time datetime="2016-07-28 16:45:20 UTC" title="28 Jul  2016 at 04:45PM">
        16:45 PM
      </time>
    </div>
  </li>
  <li class="current-user-message">
    <div class="avatar">
      <img src="http://placehold.it/50x50">
    </div>
    <div class="chatboxmessagecontent">
      <p>test</p>

...and so on

我需要在 test 元素中删除然后插入文本，然后将其附加到 class="chatboxcontent"

我在想这样的事情...

var message_li = $(".chatboxcontent").find('li').clone();
$(message_li).innerHTML("p") = data.text;
$(".chatboxcontent").append(message_li);

从上面我得到$(...).innerHTML is not a function。那么如何删除元素再插入呢？

有没有更好的实现方式？

Answer 1

哪里有$(message_li).innerHTML("p") = data.text;，需要用$(message_li).html(data.text);

替换

此外，如果 data.text 没有像您希望的那样包含在  标签中，您还可以执行以下操作：

$(message_li).html('' + data.text + '');

另一个解决方案，也是我个人会做的，如下：

$('<li>').addClass('current-user-message').html($('.chatboxcontent').find('li').html()).appendTo(message_li);

然后在外部样式表中包含 .current-user-message 的 CSS。

Answer 2

你可以试试这个：

$(".chatboxcontent") //Select the conatiner
.find('li:first') //Find the first 'li' element
.clone() //then clone it
.find('p') //Find the 'p' tag inside the cloned element
.html(data.text) // change the html of the 'p' tag
.end() // Return to the cloned 'li' with the 'p' tag changed
.appendTo('.chatboxcontent'); // append the cloned 'li' to the conatiner

演示： https://jsfiddle.net/iRbouh/x4h69939/

希望对您有所帮助。

JQuery 克隆 li+children，更新文本（在 child 标签中），并追加

JQuery clone li+children, update text (in child tag), and append

html

javascript

jquery

clone

innerhtml