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