<style type="text/css">
    div {
        border: 1px solid #000;
        margin: 10px 10px;
        background-color: #0095ff;
        width: 200px;
        height: 100px;
    }
</style>
<input type="button" value="JQ淺克隆" id="c1" />
<input type="button" value="JQ深克隆" id="c2" />
<div id="dv1">
    <span>用戶名：</span><input type="text" />
</div>

$(function () {
    //注冊dom的0級單擊事件
    var dv1 = document.getElementById("dv1");
    dv1.onclick = function () {
        console.log("dom 0級事件");
    };
    //注冊dom的2級單擊事件
    dv1.addEventListener("click", function () {
        console.log("dom 2級事件");
    });
    //注冊JQ的單擊事件
    //$("#dv1").click(function () { console.log("我是dv1"); });
    $(dv1).click(function () { console.log("我是dv1"); });
    //01.淺克隆 不會復制事件
    //包括 0級/2級dom事件與JQ的事件 都不會被復制
    $("#c1").click(function () {
        //$newDiv克隆出來的新div
        var $newDiv = $("#dv1").clone();
        //在克隆的div追加一個p元素
        //用于標示新div是淺克隆出來的
        $newDiv.append('<p>淺克隆</p>');
        //將克隆的div插入到$("#dv1")的后面
        $newDiv.insertAfter($("#dv1"));
    });

    //02.深克隆 會復制事件
    //注意：jq事件 會復制，
    //0級/2級dom事件 不會被復制
    $("#c2").click(function () {
        var $newDiv = $("#dv1").clone(true);
        //用于標示新div是深克隆出來的
        $newDiv.append('<p>深克隆</p>');
        $newDiv.insertAfter($("#dv1"));
    });
});