jQuery -> 克隆DOM元素

来源：互联网发布：淘宝转运服务编辑：程序博客网时间：2024/06/13 03:34

使用jQuery内置的clone函数可以克隆DOM元素，而且clone函数支持链式调用

下例是clone的一个简单用法，它做了一个ul的副本，并添加到body中。

[javascript] view plaincopy
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <ul>  
            <li>list</li>  
            <li>list</li>  
            <li>list</li>  
            <li>list</li>  
        </ul>  
        <script type="text/javascript" src="jquery-1.11.1.js"></script>  
        <script type="text/javascript">  
            <strong>$('ul').clone().appendTo('body');</strong>  
        </script>  
    </body>  
</html>  

利用clone函数我们可以完成一些更加复杂的操作

比如，克隆一个元素，然后删除被克隆的原始元素

仍然以ul为例，按照以下流程对其进行操作

获取ul(id='a')的所有li元素
为li元素添加click事件
克隆所有的li元素
把克隆的li元素添加到另一个ul(id='b')元素中
删除原始的ul(id='a')元素

代码示例如下

[javascript] view plaincopy
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <ul id="a">  
            <li>list</li>  
            <li>list</li>  
            <li>list</li>  
            <li>list</li>  
        </ul>  
        <ul id="b"></ul>  
        <script type="text/javascript" src="jquery-1.11.1.js"></script>  
        <script type="text/javascript">  
            $('ul#a li')  
                .click(function() {  
                    alert('List Item Clicked')  
                })  
                .parent()  
                .clone(true)  
                .find('li')  
                .appendTo('#b')  
                .end()  
                .end()  
                .end()  
                .remove();  
        </script>  
    </body>  
</html>xxx  

在执行完appendTo('#b')之后，连续调用了三次end()回溯到原始的ul元素，然后进行删除

第一个end()撤销了appendTo('#b')的操作
第二个end()撤销了find('li')的操作
第三个end()撤销了clone(true)的操作
三个end()执行完之后，回到了parent()的结果集，也就是remove()的作用对象

0 0