jQuery clone() 方法

jQuery 中的 clone() 方法用於建立 jQuery 選擇器選擇的元素的深度副本。它複製選定的元素，包括所有後代元素及其屬性。

此方法允許您複製 DOM 結構中的元素，而不會丟失與其關聯的事件處理程式或資料。

語法

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

$(selector).clone(true|false)

引數

此方法接受以下引數：

true: 指定也應複製事件處理程式。
false: 指定不應複製事件處理程式。這是預設值。

示例 1

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

<html>
<head>
<script src="https://code.jquery.com/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.jquery.com/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

列印頁面