How to understand DOM copy clone()-JS Tutorial-php.cn

How to understand DOM copy clone()

一个新手

Release： 2017-09-30 09:23:59

Original

1519 people have browsed it

Clone node is a common operation of DOM. jQuery provides a clone method, which is specially used to deal with dom cloning:

.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

Copy after login

The clone method is relatively simple, but it is to clone the node. It should be noted that if the node has other processing such as events or data, we need to pass a Boolean value ture through clone(ture) to specify, so that it not only clones the simple node structure, but also gives the attached events and data. Clone

for example:

HTML部分<p></p>JavaScript部分
$("p").on(&#39;click&#39;, function() {//执行操作})

//clone处理一
$("p").clone()   //只克隆了结构，事件丢失

//clone处理二
$("p").clone(true) //结构、事件与数据都克隆

Copy after login

It is so simple to use. Additional details we need to know when using clone:

clone() method, before inserting it into the document, we can modify the cloned element or element content, such as the code on the right $(this).clone().css('color', 'red') adds a color
By passing true, all event handlers bound to the original element are copied to the cloned element
The clone() method is an extension of jQuery and can only handle events and data bound through jQuery
Objects and arrays within the element data (data) will not be copied and will Continue to be shared between the cloned element and the original element. All data for deep copying needs to be manually copied for each

Case analysis:

<!DOCTYPE html><html><head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }
    
    .left p,
    .right p {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    </style></head><body>
    <h2>通过clone克隆元素</h2>
    <p class="left">
        <p class="aaron1">点击,clone浅拷贝</p>
        <p class="aaron2">点击,clone深拷贝,可以继续触发创建</p>
    </p>
    <script type="text/javascript">
        //只克隆节点
        //不克隆事件        $(".aaron1").on(&#39;click&#39;, function() {
            $(".left").append( $(this).clone().css(&#39;color&#39;,&#39;red&#39;) )
        })    </script>

    <script type="text/javascript">
        //克隆节点
        //克隆事件        $(".aaron2").on(&#39;click&#39;, function() {
            console.log(1)
            $(".left").append( $(this).clone(true).css(&#39;color&#39;,&#39;blue&#39;) )
        })    </script></body></html>

Copy after login

The above is the detailed content of How to understand DOM copy clone(). For more information, please follow other related articles on the PHP Chinese website!