暂时删除并稍后重新插入DOM元素？

是否有一些jquery魔法可以让我做以下事情：

[0-在HTML中定义一些元素（例如， 未选中的复选框）]

1-通过使用.attr（）设置其中一个属性来更新其DOM元素（例如，通过使用.attr（’checked’，true）设置其“checked”属性）

2-暂时从DOM中删除该元素

3-将原始元素重新插入到DOM中，同时保留其所有属性（即，使其在步骤1-结束时进行检查 – 不像最初在HTML中定义时那样）

我有兴趣从DOM中删除这些元素（而不是隐藏它们）的原因是我注意到它似乎可以提高性能。 我的页面有三个不同的“状态”，在任何给定的状态下只需要DOM元素总数的三分之一。 [我希望将它保持为具有不同状态的单个页面，而不是将其分成三个单独的页面。]

到目前为止，我通过在var中存储值来删除元素并将其重新插入到DOM中

$("#myElement").html() 

然后删除它，但现在我注意到，在将HTML重新插入DOM后，[在步骤1中]所做的更改已“撤消”。

有没有办法做到这一点 – 暂时从DOM中删除不需要的东西，以保留其所有属性以便以后重新插入？

感谢任何见解，

拉拉

Answer 1

您可以使用clone方法：

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

尽管如此，最好显示和隐藏它们（例如通过display: none ），而不是操纵DOM，因为它非常昂贵。 如果必须，使用DOM插入和删除（如上所述），而不是.html () ，它每次都会从给定的字符串重新创建一个节点。

Answer 2

问题回答六天后，jQuery发布了1.4，其中包含了分离方法。 这正是你正在寻找的。

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

Answer 3

只需从文档中删除元素并保留对它的引用。 没有必要克隆它。

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

除了你在你的例子中提到它之外，直接设置复选框的checked属性比使用attr()更简单，更清晰，更快捷。 根本不需要涉及属性，事实上jQuery的attr() 通常不会。 只需做$("#myElement")[0].checked = true; 。 它适用于所有主流浏览器。