您的位置：首页 > Web前端 > jquery > 正文

jquery中使用detach 移除元素

更多时间：2016-4-18 类别：Web前端浏览量：805

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>

标签：jquery

上一篇：ASP.NET中使用CodeDomProvider调用js文件中的js方法

下一篇：jquery属性选择器

您可能感兴趣

jquery中使用detach 移除元素

jquery中使用detach 移除元素

热门推荐

排行榜