jQuery方法区别(七)detach() remove()区别

展开全文

jQuery 中 detach() 方法是在 jQuery 1.4 版本中新加入进去的，作用是从 DOM 中删除所有匹配的元素。说到删除匹配的元素，大家很快就会想到 remove() 方法了，今天就让我们区别下 jQuery 中 detach() 和 remove()。

首先，看看 jQuery 1.4 文档中对 detach() 方法的解释：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

我们以一个非常简单的例子来说明下，相信看完例子后大家一下就明白 detach() 方法和 remove() 方法的区别了，并能在实际的项目中合理的使用 detach()。如有下边 HTML：

<body id="body">
    <div id="google">Google</div>
    <div id="apple">Apple</div>
</body>

接下来，使用 detach() 方法将 id 为 "apple" 的节点删除，最后又将它 append 到 body，如下：

$(document).ready(function () {
    $("#apple").hover(function () {
        $(this).text("Google+");
    });

    //使用 remove() hover()事件也会被删除
    //apple = $("#apple").remove();

    //使用detach() hover()事件会保存下来
    apple = $("#apple").detach();
    $("#body").append(apple);
});

结果如下图所示：

jQuery detach() 方法 jQuery remove() 方法

从上图可清楚的看到，使用 detach() 方法保留了<div id="apple">的 hover 事件，而使用 remove() 却没，到这相信大家已经非常清楚 detach() 和 remove() 的区别了。