Append additional html to cloned object in jquery

Question

I want to add additional html in the cloned object.

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

I know about wrap method but that is something else. I want to append html after this cloned object. Or somehow i can manipulate the HTML of the cloned object element.

Answer 1

This approach is to explain how the .clone() works, and covers all the states you ever mentioned in the question, such as..

1. Creating a clone of a DOM
2. Appending additional raw HTML to a clone
3. Manipulating the clone
4. Manipulating the content in the clone
5. Clone in another clone
6. Appending another clone to a clone
7. Appending HTML after this cloned object

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

Assuming you are trying to add html after the clone:

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

The .appendTo() returns the element that was appended, so you can then manipulate it as required, eg using .after()