cloning divs are not not working in IE using jquery clone()

Question

I am trying to clone divs and append them into container divs. The solution i have works fine in Chrome but does not run at all in IE. I have tried researching this and even asked about this problem but couldnt really find a working solution. Does anyone have any suggestion? This is what I have so far

The html looks somewhat like this

<div class="holdOne"></div>
<div class="holdTwo"></div>
<div class="holdThree"></div>

<div class="productHolder">
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
</div>

jquery

$(function() {
    $('.productHolder .product').eq(0).clone().appendTo('.holdOne');
    $('.productHolder .product').eq(1).clone().appendTo('.holdOne');
    $('.productHolder .product').eq(2).clone().appendTo('.holdOne');

    $('.productHolder .product').eq(1).clone().appendTo('.holdTwo');
    $('.productHolder .product').eq(2).clone().appendTo('.holdTwo');
    $('.productHolder .product').eq(3).clone().appendTo('.holdTwo');

    $('.productHolder .product').eq(0).clone().appendTo('.holdThree');
    $('.productHolder .product').eq(5).clone().appendTo('.holdThree');
    $('.productHolder .product').eq(4).clone().appendTo('.holdThree');
});

Also is `fucntion` misspelled in your script too? That could hamper it from working. — SomeShinyObject, Mar 29 '13 at 02:30
This is the third time that you have posted this question. How it doesn't work? — Ram, Mar 29 '13 at 02:33
@undefined- that means i still couldnt find the solution. And no not third time. This the second time where I added more information to be more descriptive. If you have anything to say about my question you are most welcome to contribute. — soum, Mar 29 '13 at 02:36
This is the third time, you have deleted the previous one. Please define what does _doesn't work_ mean here. Do you get any errors? Which version of IE? 5, 6, 7, 8, 9, 10? — Ram, Mar 29 '13 at 02:37
@undefined- no error message. And I have only checked for IE 8 and 9. Please rad my response to Christopher. I have already explained what I mean by does not work. — soum, Mar 29 '13 at 02:41
well lets say this is the project here. http://dev31.us.loreal.demandware.net/on/demandware.store/Sites-kerastase-Site/default/Search-Show?cgid=testSlot I think this might help — soum, Mar 29 '13 at 02:55

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

Could be a bug? jQuery .clone() .html() in IE Bug

So perhaps ditching the clone() and just using the elements html() value could work? It's a bit messier, though.

var dummy = $('.productHolder .product').eq(0);
$('.holdOne').append(dummy.html());

Obviously you'll need to repeat that for each clone. I'm on a Mac and can't test IE, but hopefully that helps. Check out the fiddle below, although it doesn't grab the outerHTML.

Fiddle

http://jsfiddle.net/URKq5/1/

Edit

I found another SO post that could help with the outer HTML. This should help put it more inline with what you originally had:

$('.holdOne').append($('.productHolder .product').eq(0)[0].outerHTML);

New Fiddle

http://jsfiddle.net/URKq5/3/

SO Link

jQuery: outer html()

edited May 23 '17 at 10:32

Community

1
1

answered Mar 29 '13 at 02:56

Jace

3,052
2
22
33

@jace- looks like it does work on IE. But let me try it out on the site and see if responds. Yeah I would agree it is messy. I am still trying to come up with a better approach where I could store them in an array and then append the array in a div – soum Mar 29 '13 at 03:02
1

I updated my answer, i found a better way to do it. Still not sure if it will work on IE or not though, but good luck! Please see my new Fiddle and edit. – Jace Mar 29 '13 at 03:07
Please mark this as answer if you feel it appropriate! Glad I could have helped! – Jace Mar 29 '13 at 03:45

cloning divs are not not working in IE using jquery clone()

1 Answers1