美文网首页前端
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克隆节点

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