jQuery change html on clone

Question

On click I am copying a div. I wish to alter some of the html and then append.

I have tried the following, it will clone and append but I cant seem to alter the html. Not sure what is the best way to handle it, i am sure I have it wrong.

thanks

var htmlStr = $(this).parents(".listingContainer").first();
$htmlStr.find(".saveCompareShow").remove()
$(htmlStr).clone().appendTo('.compareWrapper');                         

Answer 1

Once you have cloned a DOM element you should treat it just as though you wanted to change a DOM element that isn't being cloned. You just use your variable instead of a selector.

Assuming that you have HTML like this:

​<div class='listingContainer'>
    <div class='listing'>
        Something
    </div>
    <div class='listing'>
        Another something
    </div>
</div>

You can clone the contents of the listingContainer DIV and change the contents before appending them to the compareWrapper div. The following JavaScript shows a simple example:

$(document).ready(function() {
    $('.listing').click(function() {
        var $htmlStr = $(this).parents(".listingContainer").first();
        $htmlStr.clone().find('.listing').html('<li>Cloned</li>').appendTo('.compareWrapper');
    });
});

I've also posted a jsFiddle so you can see it working: http://jsfiddle.net/hkBMK/

Answer 2

After cloning, you can treat the object just as if it was html already in the dom.

For example - html on your page:

<div id="cloneHere"></div>
<div class="well" id="buildInfoTemplate">
    <form>
        <fieldset>
          <legend></legend>
          <label></label>
          <input type="text" placeholder="Type something…">
          <span class="help-block">Example block-level help text here.</span>

          <button class="btn">Save</button>
        </fieldset>
    </form>
</div>

Lets say you wanted to change the help-block text:

var template = $('#buildInfoTemplate').clone().removeAttr('id');
$('.help-block',template).html('hi there ryan');
$('#cloneHere').append(template);

And you'll get:

<div id="cloneHere">
  <div class="well">
    <form>
        <fieldset>
          <legend></legend>
          <label></label>
          <input type="text" placeholder="Type something…">
          <span class="help-block">hi there ryan</span>

          <button class="btn">Save</button>
        </fieldset>
    </form>
  </div>
</div>