dom03节点的插入移除克隆

节点的插入移除克隆
插入：
appendChild();追加子节点 把一个节点放到父节点内部的最后。
如果是页面上原有的节点 会被从原来的位置上揪下来 放到新的位置。

insertBefore(要插入的新的子节点,参考节点);
插入到前面 把一个节点放到父节点内部 参考节点的前面。

克隆：
cloneNode(true)；true是全部克隆，一般都传true。
var clone=demo.cloneNode(true);克隆之后需要追加进去才会显示在页面。
father.addpendChild(clone);//克隆出来的节点，和原来的节点互不影响。

移除：
removeChild();

<script>
//克隆
    var zIndex=0;
    var tip=document.getElementById('cc');
    var content=document.getElementById('content');
 //批量克隆
    for (var i = 0; i < 10; i++) {
        var cloneTip=tip.cloneNode(true);
        cloneTip.id="cc"+i;
        content.appendChild(cloneTip); 

//产生随机位置：（水平方向，垂直方向）
//Math.random()设置的取值范围是[0,1);
//屏幕的大致范围为400-800;[0,1)*400+400=[400,800);
//垂直方向0-400
    var x=parseInt(Math.random()*400+400);
    var y=parseInt(Math.random()*400);
//控制克隆的元素位置
    cloneTip.style.left=x+"px";
    cloneTip.style.top=y+"px";
//设置每一个便签的层级关系zIndex，设置之前先用一个变量接收zIndex。
//再绑定点击事件
    cloneTip.onclick=function(){
         zIndex++;
         this.style.zIndex= zIndex;
        } ;
    //双击头部关闭纸条 双击ondblcilck;
    var header=document.getElementById('content').getElementsByTagName('tip_h'); 
   //获取元素 firstElementChild 第一个子元素
   // var header=cloneTip.firstElementChild;
    header.ondblcilck=function(){//双击事件
       // this.parentNode.style.display="none";此方法只在界面上消除了便签。
       // 要从结构上消除便签需要调用removeChild移除
       content.removeChild(this.parentNode);

    }
   /*? //点击x号关闭便签
    var header=document.getElementById('content').getElementsByTagName('close'); 
    header.onclick=function(){
    content.removeChild(this.parentNode);
 };*/ 
}
</script>