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

  •  
  • HTML 代码   复制
  • 
    <!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>
    
    		
  • 标签: