dom03节点的插入移除克隆

来源：互联网发布：pcb软件最好编辑：程序博客网时间：2024/05/22 06:36

节点的插入移除克隆
插入：
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>

0 0