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');
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/
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>
so your variable htmlStr is actually an element, not a string. but that is ok. I think you need to do this on the second line:
htmlStr.remove(".saveCompareShow");
If I see correcly, you are trying to remove elements with the class ".saveCompareShow" from the htmlStr element. Is that right?
** EDIT **
Try this to replace both line 2 and 3
$(htmlStr).clone().remove(".saveCompareShow").appendTo('.compareWrapper');
