Inserting a DOM element in more than one location with jQuery

Question

I have some pagination code defined in a variable ($pager) that I would like to appear at the top and bottom of a table ($table).

I've tried the following:

$pager.
 insertBefore($table);
 insertAfter($table);

However, the second instruction appears to overwrite the first, meaning the pages only appear beneath the table. How can I insert the pagination at the top and bottom of the table?

Answer 1

You should clone your pager object, but be careful with your markup, since you could end up having duplicated id attributes:

$pager.insertBefore($table).clone().insertAfter($table);

And if you want to clone also and all their event handlers, use clone(true).

Answer 2

i think if you put a .clone() in there it might work...