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

最新推荐文章于 2023-06-16 20:53:39 发布

qwy715229258163

最新推荐文章于 2023-06-16 20:53:39 发布

阅读量223

点赞数 2

分类专栏： Jquery 文章标签： jquery javascript js

本文链接：https://blog.csdn.net/qwy715229258163/article/details/113875978

版权

Jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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>

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>

qwy715229258163

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11--Jquery中的DOM操作(克隆节点)

clone():克隆匹配的DOM元素，返回克隆后的副本，但是被克隆的新节点不具有任何行为。实例1:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>克隆节点</title> <script src="jquery-1.11.3.js"></script></head><b.
复制链接

扫一扫

专栏目录