clone

Module

Methods

dom.clone()
HTMLElement clone (selector [ , deep=false , withDataAndEvent=false , deepWithDataAndEvent=false ])
获取符合选择器的第一个元素的克隆元素.
Parameters:
  • selector (string|HTMLCollection|Array<HTMLElement>) – 字符串表示 css3 选择器
  • deep (boolean) – 是否深度克隆(克隆节点的子孙节点)
  • withDataAndEvent (boolean) – 节点是否具备源节点的 dom.data 属性以及 事件
  • deepWithDataAndEvent (boolean) – 子孙节点是否具备源节点对应子孙节点的 dom.data 属性以及 事件
Returns:

符合选择器的第一个元素的克隆元素.

Return type:

HTMLElement

Note

普通对象和普通数组请用 KISSY.clone

clone 方法可以进行深度复制,当配合插入方法时,可以方便得复制页面中的元素.

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

如果页面中的已存在元素被插入到 DOM 树的其他位置,那么它会从原来的位置移除,如以下代码所示

KISSY.one('.hello').appendTo('.goodbye');

产生的 dom 结构如下:

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

为了阻止原来的元素移动,而插入一个元素的复制版本,那么你可以这样写

KISSY.one('.hello').clone(true).appendTo('.goodbye');

这就会产生:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
    <div class="hello">Hello</div>
  </div>
</div>

Note

clone 后, 你可以对其进行修改后再插入,可有效提高性能.

默认情况下 clone 后的元素不会具备源元素的 data 属性以及事件绑定,但是如果你设置了 withDataAndEvent=true , 那么 clone 后的元素也会具备源元素的 data 属性以及事件绑定。

更进一步的你可以设置 deepWithDataAndEvent 来使得 clone 后元素的子孙元素也具备源元素对应子孙元素的 data 属性和事件绑定.注意这时 deep 参数也要设置为 true.

Note

源元素的对象以及数组类型的 data 属性只是引用被复制到 clone 后的元素,他们的值则会在源元素以及克隆元素间共享,如果想进行 deep copy,请手动进行

var elem=KISSY.one(".hello").attr("custom",{x:1});
elem.clone().attr("custom",{x:2});

示例: 高级点的,克隆后保留原有事件逻辑

<!DOCTYPE html>
<html>
<head>
    <style>
        button { margin:10px; }
        div {
            border:1px solid red;
            margin:10px;
            cursor:pointer;
            width:100px;
        }
    </style>
    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
    
    <button id='c'>clone</button>
    <div>
       点我1
    </div>    
    
<script>
    KISSY.use('core',function (S) {
        var $=S.all,
                i=1,
                c=$("#c"),
                d=$("div");
        d.on("click",function(){
            alert($(this).html()+" clicked");
        });
        c.on("click",function(){
            // true : 克隆后的节点附带源节点的 data 以及事件
            d.clone(false,true).html("点我"+(++i)).appendTo("body");
        });
    });
</script>
</body>
</html>