jQuery clone( ) 方法

最新推荐文章于 2025-03-17 08:53:46 发布

「已注销」

最新推荐文章于 2025-03-17 08:53:46 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/m0_57835615/article/details/117826718

版权

jQuery 的 clone() 方法用于复制元素，包括其子节点、文本和属性。默认不复制事件，设置参数为 true 可复制事件。本文提供详细示例说明如何使用 clone() 方法进行元素克隆。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery clone( ) 方法可用于克隆元素，克隆出来的元素包含原元素子节点、文本以及属性。

语法格式：

$(selector).clone(true[false])

参数：默认为false，不复制原元素的事件。若设置为true，可复制原元素的事件。

示例：

（1）复制原元素的子节点，文本以及属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery/jQuery.js"></script>
    <script>
        $(document).ready(function(){
            $("li").click(function(){
                $("ul").append($(this).clone());
            })
        })
    </script>
    <style>
        .one {
            color: blue;
            font-size: 16px;
            font-weight: bold;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <ul>
        <li class="one">苹果：<span>apple</span></li>
        <li class="one">香蕉：<span>banana</span></li>
        <li class="one">橘子：<span>orange</span></li>
    </ul>
</body>
</html>

以上三个li元素，任意一个被点击，都会被克隆，并且克隆出来的元素将被添加至最后一个li元素的后面。

依次点击前三个li元素，效果如图：

可见，每个li元素都已被成功克隆，并且克隆出来的元素包含原元素子节点、文本以及属性，但是，由于事件并没有被克隆，所以点击克隆出来的li元素，不会有任何效果。

（2）克隆原元素（包含事件）

若要克隆原元素的事件，只需将clone( )方法中的参数设置为true。

将原代码修改如下：

$("li").click(function(){
                $("ul").append($(this).clone(true));
            })

此时，我们点击任意一个li元素，都可以实现克隆操作。如下图：

点击任意一个li，都会被克隆至ul元素的末尾。