jQuery复制节点用法示例(clone方法)

当我们需要在一个 DOM 元素中，添加一个与现有元素相同的副本时，我们可以使用 jQuery 的 clone() 方法。下面是使用 clone() 方法的完整攻略：

理解clone方法

clone() 方法返回被选元素的副本。该方法可选地接受一个布尔参数，表示是否克隆元素上的事件处理程序和数据。

示例1：复制单个节点

我们可以使用以下代码来复制一个单独的节点：

<div id="original_node">原始节点</div>
<button id="clone_btn">克隆节点</button>

<script>
$("#clone_btn").click(function() {
  $("#original_node").clone().appendTo("body");
});
</script>

在这个示例中，我们首先创建了一个原始节点，然后添加了一个克隆节点的按钮。当用户点击该按钮时，我们使用 clone() 方法复制原始节点，并将其添加到 body 中。

示例2：复制一组节点

我们也可以复制一组节点，如下所示：

<ul id="original_list">
  <li>列表项1</li>
  <li>列表项2</li>
  <<li>列表项3</li>
</ul>
<button id="clone_list_btn">克隆列表</button>

<script>
$("#clone_list_btn").click(function() {
  var cloned_list = $("#original_list").clone();
  cloned_list.attr("id", "cloned_list");
  $("body").append(cloned_list);
});
</script>

在这个示例中，我们创建了一个原始列表和一个按钮，当用户点击该按钮时，我们使用 clone() 方法复制原始列表。我们还使用 attr() 方法为克隆列表设置一个新的 ID，并将其添加到 body 中。

使用 clone() 方法时，我们需要注意以下几点：

• 如果我们需要为克隆的节点设置新的 ID，必须使用 attr() 方法来设置它。
• 如果我们需要将克隆节点添加到另一个元素中，必须使用 appendTo() 或其他添加节点的方法。