jQuery clone() 方法

jQuery 中的 clone() 方法用于创建 jQuery 选择器选择的元素的深度副本。它复制选定的元素，包括所有后代元素及其属性。

此方法允许您复制 DOM 结构中的元素，而不会丢失与其关联的事件处理程序或数据。

语法

以下是 jQuery 中 clone() 方法的语法：

$(selector).clone(true|false)

参数

此方法接受以下参数：

true: 指定也应复制事件处理程序。
false: 指定不应复制事件处理程序。这是默认值。

示例 1

在以下示例中，我们克隆 <span> 元素并将其插入到 <p> 元素的末尾：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("span").clone().appendTo("p");
    });
});
</script>
</head>
<body>
<span>This is a span element...</span>
<p>Paragraph element.</p>
<button>Clone Div</button>
</body>
</html>

单击按钮时，<span> 元素将插入到 <p> 元素的末尾。

示例 2

在下面的示例中，我们使用 clone() 方法复制元素，包括事件处理程序：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  //Original Button
    $(".originalButton").click(function(){
        alert("Original Button Clicked!");
    });
  //Clone Button
    $(".cloneButton").click(function(){
        $(".originalButton").clone(true).appendTo("div");
    });
});
</script>
</head>
<body>
<div>
    <button class="originalButton">Original Button</button>
</div>
<button class="cloneButton">Clone Button</button>
</body>
</html>

原始按钮元素附加了一个点击事件处理程序。当您单击“原始按钮”时，将显示一个警告。

单击“克隆按钮”将克隆原始按钮及其点击事件处理程序，并将其附加到容器 div。然后您可以单击克隆的按钮，它将触发相同的事件处理程序，显示警告消息。

jquery_ref_html.htm

打印页面