在jquery中将其他html附加到克隆对象

Question

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

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

我知道包裹方法,但那是另一回事.我想在这个克隆对象后附加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>

Answer 2

假设您尝试在克隆后添加 html：

$("#toclone")
    .clone()
    .attr({"id":"cloned"})
    .appendTo("#all-items")
    .after("<div>some more content <em>after</em> the clone</div>");

返回.appendTo()附加的元素，因此您可以根据需要对其进行操作，例如使用.after()