美文网首页前端
jQuery克隆节点

jQuery克隆节点

作者: 马佳乐 | 来源:发表于2022-03-14 08:58 被阅读0次

语法:
$(selector).clone(true|false);
参数:
参数不管是true还是false,都会克隆后代节点
true:会把事件一起克隆过去。
false:不会克隆事件。默认不写为false。

代码练习:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1,
            #div2 {
                width: 200px;
                height: 200px;
                border: 1px solid red;
                margin-bottom: 10px;
            }
        </style>
    </head>

    <body>
        <input type="button" value="克隆" id="btnClone" />
        <div id="div1">
            <span>span1</span>
            <p>p1</p>
        </div>
    </body>

</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
    $(function() {
        $("#btnClone").click(function() {
            //给id为div1的元素添加一个事件
            $("#div1").click(function() {
                alert("点击事件触发~");
            });
            var $cloneDiv = $("#div1").clone(true);
            //修改克隆节点的id
            $cloneDiv.attr("id", "div2");
            //把克隆的节点追加到body中
            $("body").append($cloneDiv);
        });
    });
</script>

相关文章

  • jQuery中的DOM操作2

    替换与创建节点 clone节点 克隆节点原生与jquery区别原生==>节点.cloneNode() true 克...

  • jQuery克隆节点

    语法:$(selector).clone(true|false); 参数: 参数不管是true还是false,...

  • JQuery的clone()方法

    克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆。 .clone()方法深...

  • jQuery基础(2)

    (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...

  • dom节点和jquery对象

    选择器得到的是jquery对象 从jquery对象得到节点 将节点转换为jquery对象

  • jQuery事件

    jquery事件 事件函数列表: 取消绑定事件: jquery元素节点操作 插入节点 删除节点 todolist(...

  • Parallels Desktop 克隆虚拟机之后 produc

    最近安装 Kubernetes 集群,克隆几个节点后,发现克隆的节点 product_uuid 相同。 使用文档h...

  • Jquery获取上级、同级、下级元素

    一、下面介绍JQUERY的父,子,兄弟节点查找方法 查找$(jquery)的父节点 查找$(jquery)的所有父...

  • 14、克隆节点

    click(参数1): 克隆节点 无参:默认为false 参数:无论是true还是false都会克隆后代节点 参数...

  • DOM节点的增删改

    1:DOM节点的增加 createElement创建节点 cloneNode克隆节点 appendChild追加节...

网友评论

    本文标题:jQuery克隆节点

    本文链接:https://www.haomeiwen.com/subject/wtsrdrtx.html