jquery clone()复制节点的用法（附带实例）

jQuery 提供了 clone() 方法用于复制节点，该方法有两种形式：

一种是不带参数的形式，用于复制匹配的 DOM 元素并且选中这些复制的副本；
另一种是带有一个布尔型参数的形式，当参数为 true 时，表示复制匹配的 DOM 元素及其所有的事件处理并且选中这些复制的副本；当参数为 false 时，表示不复制元素的事件处理。

【实例】复制节点。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中添加一个 <div> 元素，在 <div> 元素下创建两个 <p> 节点，并且为 <p> 节点赋予属性 title。具体代码如下：

<div>
    <p title="C语言中文网">C语言中文网</p>
    <p title="C语言基础教程">C语言基础教程</p>
</div>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，删除 <div> 元素下的第二个 <p> 节点。具体代码如下：

$(function() {
    $("div p:eq(1)").bind("click",function() { // 为按钮绑定 click 事件
        $(this).clone().insertAfter(this); // 复制自己但不复制事件处理
    });
});

运行本实例，多次单击“C语言基础教程”可以显示下图所示的效果。

图 1 复制节点

图中所示的效果，是一直单击第 1 个“C语言基础教程”所在的 <p> 元素产生的。如果单击其他“C语言基础教程”所在的 <p> 元素，是不能产生此效果的，因为没有复制元素的事件处理。如果需要同时复制元素的事件处理，可以给 clone() 方法传递参数，即 clone(true)。

jquery clone()复制节点的用法（附带实例）

相关文章