重新附加jQuery detach()；

Question

我已经分离了一个div，并希望在单击按钮时重新附加它。

代码如下：

$('#wrapper').detach();

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

任何帮助都将不胜感激。

Answer 1

var el = $('#wrapper').detach();

$("#open_menu").click(function(){
    $(this).append(el);
});

Answer 2

我需要一个解决方案，即使在目标元素之后有其他元素要分离然后重新附加，它也可以工作。这意味着append可能不可靠，因为它会将该元素移回其父元素的末尾。我不得不使用占位符，这可能不是最优雅的解决方案，但我没有找到其他方法。

var $wrapper = $('#wrapper')
    , $placeholder = $('<span style="display: none;" />')
        .insertAfter( $wrapper )
    ;
$wrapper.detach();

$("#open_menu").on('click',function(){
    $wrapper.insertBefore( $placeholder );
    $placeholder.remove();
});

为了使其更具可重用性，最好将其封装在jQuery插件中：

(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);

用法：

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

Answer 3

如果希望将项附加到元素的开头，可以使用.prepend()

否则，您可以使用append()附加它。

在您的情况下，它将是：

var $wrapper = $('#wrapper').detach();

$("#open_menu").click(function(){
    //ATTACH HERE !!!
    $(this).prepend($wrapper); // or $(this).append($wrapper);
});

我希望它能有所帮助:)