temporarily removing and later reinserting a DOM element? temporarily removing and later reinserting a DOM element? ajax ajax

temporarily removing and later reinserting a DOM element?


Six days after the question was answered jQuery released 1.4 which contains the detach method. Which does exactly what you're looking for.

var detached = $('#element').detach();$('body').append(detached);


You may use the clone method:

var els = $('.els'), saved = els.clone (true);els.remove ();// .... do other stuffsaved.appendTo ($('.wherever-you-want-to'));

That said, though, it's better to show & hide them (via display: none, for example), than to manipulate the DOM as it's very expensive. If you have to, use DOM insertion & removal (as above), rather than .html (), which recreated a node from the given string every time.


Just remove the element from the document and keep a reference to it. There's no need to clone it.

var el;function removeEl() {    el = $("#myElement")[0]; // Get the element itself    el.parentNode.removeChild(el);}function reinsertEl(node) {    node.appendChild(el);}

As an aside since you mentioned it in your example, it's much simpler, clearer and faster to set the checked property of a checkbox directly rather than use attr(). There's no need to involve attributes at all and indeed jQuery's attr() usually doesn't. Just do $("#myElement")[0].checked = true;. It works in all mainstream browsers.