Hi All,
I have a need to move a few hundred dom nodes from one place in a page
to another place. For example, to take all link tags inside a div and
move them to another div, like from divA to divB below:
<div id="divA">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div id="wrapper">
<div class="divB">
</div>
</div>
I'm using jquery 1.3.2 (and have not tried 1.2.6 yet). I've found that
in FF, Safari and Opera using .append() works OK: the append happens
fairly fast, but in IE6/7 it's really slow. I'm not sure of the nature
of the slowdown. My code is something like this:
var $myContext = $('#wrapper'); // var already available
var $divB = ('.divB', $myContext);
$('#divA').children('.a-specific-class').each(function(){
$divB.append($(this));
});
Anyway, I'm wondering if anyone has any advice or best practice to
recommend for doing something like this, in particular with respect to
getting decent speed on IE6/7. The speed I'm seeing seems to be ~20-30x
slower than the other browsers.
Ideally, I'd like to preserve any event handlers (that some other code
may have added to the nodes I'm moving), which is why I'm using
.append($(this)), but it's not completely mandatory if there's no way to
do so and keep the speed.
Thanks,
Jack