jquery中使用detach 移除元素
jquery中使用detach 移除元素detach()函数用于从文档中移除匹配的元素，与remove()相比，detach()函数不会移除与元素关联绑定的附加数据( data()函数 )和事件等(remove()会移除)。
如果要删除以后不再利用的元素时，使用empty或者remove。
一、detach()语法
$(selector).detach(expr)
二、detach()的使用场合
当我们要对一个元素进行大规模的增删改的时候，我们可以用detach将这个元素提取出来，然后在这个元素上进行操作，而不是在整个dom文档中进行操作。
好处就是：减少对整个dom文档的修改，从而减少页面重绘；
三、实例
首先对#container元素绑定click事件，然后利用detach将其脱离文档，然后再创建两个child元素，追加到#container元素中，最后将#container重新添加到body
<!DOCTYPE html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
li.monkey, #container {
width:120px;
height:120px;
line-height:60px;
}
li.monkey {
border:1px solid black;
}
</style>
</head>
<body>
<li class="monkey"> </li>
<li id="container"> </li>
<script src="jquery-1.12.0.js"></script>
<script>
$(function(){
//事件代理
$('#container').on('click',function( event ){
console.log( $(event.target).text() );
});
//利用detach将container从dom文档中剥离开
var container = $('#container').detach();
var child1 = '<li>I am Monkey</li>';
var child2 = '<li>Monkey is me</li>';
//将child1、child2插入container中
$(container).append( child1 )
.append( child2 );
//将container重新插入body中
$('body').append( container );
});
</script>
</body>
</html>
li.monkey, #container