javascript - 将附加的 html 附加到 jquery 中的克隆对象

Question

我想在克隆的对象中添加额外的 html。

var item = $("#clone")
    .clone(true, true)
    .attr({"id": "citem", "class": "row cartItem_" + item_id})
    .css('display', 'block')
    .appendTo("#all-items");

我知道 wrap 方法，但那是另一回事。我想在这个克隆的对象之后附加 html。或者我可以以某种方式操纵克隆对象元素的 HTML。

Answer 1

这个方法是为了解释.clone()是如何工作的，并且涵盖了你在问题中提到的所有状态，比如..

1. 创建 DOM 的克隆
2. 将额外的原始 HTML 附加到克隆
3. 操纵克隆
4. 操纵克隆中的内容
5. 在另一个克隆中克隆
6. 将另一个克隆附加到克隆
7. 在这个克隆的对象之后追加 HTML

$(function() {
  //! Cloning the HTML
  var $clonedContent = $('.content').clone();

  // Manipulate the cloned element
  // -- Update the existing content
  $clonedContent.find('h5').text("My content just got manipulated");

  // -- Adding raw HTML content
  $clonedContent.append("<small> It's a raw HTML </small>");

  // -- Adding property to an existing content
  $clonedContent.find('small').addClass('make-me-day');

  //! Getting another cloned content
  var $anotherClonedContent = $('.content').clone();
  
  // -- Another manipulation of another cloned content
  $anotherClonedContent.find('h5').text("This is another cloned content");
  
  // -- Manipulate the another cloned content's content
  $anotherClonedContent.find('h5').addClass('make-me-day');

  // -- Add another cloned content to the already manipulated & cloned content.
  $clonedContent.append($anotherClonedContent);

  //! Finally, add the clonedContent to the DOM, aaaand.. add more HTML afterwards.
  $('#main').append($clonedContent, "<em> I added this HTML after the cloned object </em>");
  
});

.make-me-day {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="content">
    <h5> Just a simple content </h5>
  </div>
</div>