jquery复制元素

jQuery 复制元素的方法

使用 jQuery 可以轻松复制 DOM 元素。以下是几种常见的方法：

clone() 方法

clone() 是 jQuery 中专门用于复制元素的方法。默认情况下，它只复制元素本身，不包括事件处理程序和数据。

// 复制元素但不包括事件和数据
var clonedElement = $('#originalElement').clone();

如果需要连同事件和数据一起复制，可以传入 true 参数：

// 复制元素包括事件和数据
var clonedElementWithEvents = $('#originalElement').clone(true);

复制并插入到 DOM 中

通常复制元素后需要将其插入到 DOM 的某个位置：

// 复制并追加到某个容器中
$('#originalElement').clone().appendTo('#targetContainer');

// 复制并插入到某个元素前
$('#originalElement').clone().insertBefore('#targetElement');

// 复制并插入到某个元素后
$('#originalElement').clone().insertAfter('#targetElement');

修改复制后的元素

可以在插入前修改复制后的元素：

$('#originalElement').clone()
    .attr('id', 'newId')  // 修改 ID
    .addClass('newClass') // 添加类
    .appendTo('#targetContainer');

深拷贝与浅拷贝

jQuery 的 clone() 方法执行的是深拷贝，会复制元素的所有子元素。如果需要浅拷贝（只复制元素本身），可以结合其他方法实现：

// 浅拷贝示例
var shallowCopy = $('#originalElement').contents().clone();

注意事项

• 复制带有 ID 的元素时，务必修改新元素的 ID，避免 DOM 中出现重复 ID
• 大量复制操作可能影响性能，建议在必要时使用文档片段(documentFragment)优化
• 某些表单元素（如单选按钮、复选框）的选中状态也会被复制