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

Question

是否有一些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

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

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

Answer 2

您可以使用以下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 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;.它适用于所有主流浏览器.