Re-attaching jQuery detach();

Question

I have detached a div and want to re-attach it when clicking on a button.

Here's the code:

$('#wrapper').detach();  $("#open_menu").click(function(){     ATTACH HERE !!! }); 

Any help will be appreciated.

Answer 1

var el = $('#wrapper').detach();  $("#open_menu").click(function(){     $(this).append(el); }); 

Answer 2

I needed a solution that would work even if there are other elements after the target element to detach and then reattach. This means that append may not be reliable because it would move that element back to the end of its parent. I had to use a placeholder which may not be the most elegant solution, but I haven't found another way..

var $wrapper = $('#wrapper')     , $placeholder = $('<span style="display: none;" />')         .insertAfter( $wrapper )     ; $wrapper.detach();  $("#open_menu").on('click',function(){     $wrapper.insertBefore( $placeholder );     $placeholder.remove(); }); 

To make this more reusable, it might be better to wrap it in a jQuery plugin:

(function($){      $.fn.detachTemp = function() {         this.data('dt_placeholder',$('<span style="display: none;" />')             .insertAfter( this ));         return this.detach();     }      $.fn.reattach = function() {         if(this.data('dt_placeholder')){             this.insertBefore( this.data('dt_placeholder') );             this.data('dt_placeholder').remove();             this.removeData('dt_placeholder');         }         else if(window.console && console.error)         console.error("Unable to reattach this element because its placeholder is not available.");         return this;     }  })(jQuery); 

Usage:

var $wrapper = $('#wrapper').detachTemp(); $("#open_menu").on('click',function(){     $wrapper.reattach(); });