Search code examples
jqueryhtmlcloneinnerhtml

.clone() is affecting actual HTML not the copy


I am trying to take a clone(innerHtml) of one div and made some changes in that copy not in my page, but when i'm trying the following code, changes is happening in my page not in the cloned variable string. what i missed?

var layoutCopy;
$layoutCopy = $('.report').clone();
$(".holders",layoutCopy).each(function() 
{
    var placeHolder = $(this).attr('data-id');
    $(this).replaceWith(placeHolder);
});

Solution

  • var layoutCopy;
    $layoutCopy = $('.report').clone();
    $(".holders",layoutCopy).each(function() 
    {
        var placeHolder = $(this).attr('data-id');
        $(this).replaceWith(placeHolder);
    });
    

    You forgot the $ at $(".holders",layoutCopy) change it to: $(".holders",$layoutCopy) to get it working as expected.

    Since layoutCopy won't be your copy it will modify your main layout