11--Jquery中的DOM操作(克隆节点)

  1. clone():克隆匹配的DOM元素,返回克隆后的副本,但是被克隆的新节点不具有任何行为。
    实例1:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>克隆节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*给所有的li绑定一个点击事件。*/
            $("li").click(function(){
     
     
                /*获取ul元素*/
                var $fruit=$("#fruit");
                /*克隆被点击的li元素*/
                var $li=$(this).clone();
                /*将克隆的li插入到ul*/
                $fruit.append($li);
            });
        })
    </script>
</body>
</html>
  1. clone(true):复制的元素同时也复制了元素中的事件。
    实例2:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>克隆节点</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="fruit">
        <li title="pg">苹果</li>
        <li title="jz">橘子</li>
        <li title="xj">香蕉</li>
    </ul>
    <script>
        $(function(){
     
     
            /*给所有的li绑定一个点击事件。*/
            $("li").click(function(){
     
     
                /*获取ul元素*/
                var $fruit=$("#fruit");
                /*克隆被点击的li元素,且被克隆的元素还具有克隆能力*/
                var $li=$(this).clone(true);
                /*将克隆的li插入到ul*/
                $fruit.append($li);
            });
        })
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qwy715229258163/article/details/113875978