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

jQuery 中 detach() 方法是在 jQuery 1.4 版本中新加入进去的，作用是从 DOM 中删除所有匹配的元素。说到删除匹配的元素，大家很快就会想到 remove() 方法了，今天就让我们区别下 jQuery 中 detach() 和 remove()。首先，看看 jQuery 1.4 文档中对 detach() 方法的解释：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。我们以一个非常简单的例子来说明下，相信看完例子后大家一下就明白 detach() 方法和 remove() 方法的区别了，并能在实际的项目中合理的使用 detach()。如有下边 HTML：

<bodyid="body"><divid="google">Google</div><divid="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);});

结果如下图所示：



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