重新附加jQuery detach（）;

我已经分离了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 = $('') .insertAfter( $wrapper ) ; $wrapper.detach(); $("#open_menu").on('click',function(){ $wrapper.insertBefore( $placeholder ); $placeholder.remove(); }); 

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

 (function($){ $.fn.detachTemp = function() { this.data('dt_placeholder',$('') .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); }); 

我希望它有帮助:)

Answer 4

 $(function(){ var detached = $('#element_to_detach').detach(); // Here We store the detach element to the new variable named detached $('.element_after_which_you_need_to_attach').after(detached); }); 

Answer 5

我认为这主要是在分离之前记录将要分离的元素的索引，然后使用该索引来确定重新附加元素的位置。 请考虑以下“repl” https://repl.it/@dexygen/re-attach和以下代码。 setTimeout只是为了让你在分离之前可以看到页面中的元素，并且已经重命名了几个元素。 我想知道是否可以使用siblings而不是parent().children()但是我担心在兄弟姐妹中唯一的元素是分离的兄弟姐妹会发生什么事情，我们需要引用parent ，如果index === 0 。

 setTimeout(function() { var bar = $('#bar'); var parent = bar.parent(); var index = parent.children().index(bar); bar.detach(); $("#re-attach").one('click', function() { if (index === 0) { parent.prepend(bar); } else { parent.children().eq(index-1).after(bar); } }); }, 5000); 

Answer 6

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

Answer 7

jQuery不提供附加方法。 考虑分离相当于永久删除Dom中的项目。 如果您认为可能要删除并稍后恢复元素，请考虑以下选项：

1. 使用切换方法。 隐藏和取消隐藏页面中的元素。
2. 如果必须绝对从Dom中删除该项，请考虑使用jQuery clone方法，首先制作指定元素的副本，然后可以将元素副本重新引入Dom。

以上并不是实现这一目标的唯一两种方法，但是，它们很简单，并且可能不需要对您进行太多代码更改。