Question

I have a DIV that contains an unordered list. I want to make a copy of this, reformat it a bit, then re-insert it back into the DOM. This works fine, execpt on IE (tested in 8 and 9 so far) where it seems that the copy of the elements seem to be live, instead of a copy.

Here’s what happens:

var target = $('.cities').eq(0) //grab my list

var $bigList = $(target).find('li')  // grab all the list items

alert($bigList.eq(0).html()) // this displays the first list item, no problem

$(target).html(emptyList) // I put in a bunch of placeholder HTML

alert($bigList.eq(0).html()) // EMPTY on IE, same as first alert() on all others 

It seems that $bigList is still pointing to the DOM, instead of being copied as a value. How can I get around this?

Answer 1

Instead of $(target).html(emptyList) use $bigList.remove();: http://jsfiddle.net/gilly3/FP5kX/

Edit: Call both statements:

$bigList.remove();
target.html(emptyList);

http://jsfiddle.net/gilly3/FP5kX/2/