菜单

insertBefore使用方法

2020年3月30日 - 澳门太阳娱乐手机登录

appendChild(卡塔尔常用作用。

率先 从概念来精通 那三个办法: 
appendChild() 方法:可向节点的子节点列表末尾insertBefore使用方法。增加新的子节点。语法:appendChild(newchildState of Qatar 
澳门太阳娱乐手机登录,insertBefore() 方法:可在已部分子节点前插入八个新的子节点。语法
:insertBefore(newchild,refchild卡塔尔 
相近之处:插入子节点 
不一致之处:达成原理方法差异。 
     appendChild
方法是在父级节点中子节点的末段增加新的节点(相对于父级节点的话)。 
     insertBefore
 方法是在已有个别节点前加多新的节点(相对于子节点的话的)。 

日常大家用appendChild的时候,都以向父级上增多子成分appendChild的另叁个意义是,先把元素从原有父级上删掉,然后添英镑素到新的父级。。

 

  appendChild的第二种功能  window.onload=function(){ var oUl1=document.getElementById; var oUl2=document.getElementById; var oBtn=document.getElementById; oBtn.onclick=function(){ var oLi=oUl1.children[0]; oUl1.appendChild; } }    

来看个那个轻巧的实例:在id为box-one 的尾声加多一个子节点div 

1 <div class="btns">
  <input type="button" value="插入元素" id="creatbtn"/>
</div> 
2 <div id="box-one"> 
3   <p class="con2" id="p1">1</p> 
4   <p class="con2" >2</p> 
5   <p class="con2" >3</p> 
6 </div> 

 1 window.onload = function () { 
 2   var btn = document.getElementById("creatbtn"); 
 3   btn.onclick = function() { 
 4     insertEle(); 
 5   } 
 6 } 
 7 function insertEle() { 
 8   var oTest = document.getElementById("box-one"); 
 9   var newNode = document.createElement("div"); // createElement 是在对象中创建一个对象
10   newNode.innerHTML = " This is a newcon "; 
11   //oTest.appendChild(newNode); 
12   oTeset.insertBefore(newNode,null); // 这两种方法均可实现 或者oTeset.insertBefore(newNode,oTeset.childNodes[0])
    
13 } 

用appendChild的第三种效应达成二个li遵照内容大小排序

以此insertBefore 的首先个参数
和appendChild的同等,都以那多少个新的节点变量,而insert第三个参数不止可认为null
。也能够那样写:

  appendChild的第二种功能  window.onload=function(){ var oUl1=document.getElementById; var oBtn=document.getElementById; oBtn.onclick=function(){ var aLi=oUl1.getElementsByTagName; // aLi&#26159;&#19968;&#20010;&#20803;&#32032;&#38598;&#21512;&#65292;&#19981;&#26159;&#30495;&#27491;&#24847;&#20041;&#30340;&#25968;&#32452;&#65292;&#19981;&#33021;&#29992;sort&#26041;&#27861;&#65292;&#36716;&#25104;&#25968;&#32452;&#20877;&#29992;sort&#25490;&#24207; var arr=[]; for(var i=0; i&lt;aLi.length; i++){ arr.push; } arr.sort{ var n1=parseInt; var n2=parseInt; return n1-n2 }); for(var j=0; j&lt;arr.length; j++){ oUl1.appendChild;//&#24403;&#28155;&#21152;&#23376;&#20803;&#32032;&#30340;&#26102;&#20505;&#20197;&#21069;&#30340;&#20803;&#32032;&#24050;&#32463;&#34987;&#21024;&#38500;&#65292;&#25152;&#20197;&#19981;&#20250;&#20986;&#29616;&#37325;&#22797;&#20803;&#32032; } } }    
1 function insertEle() { 
2   var oTest = document.getElementById("box-one"); 
3   var newNode = document.createElement("div"); 
4   var reforeNode = document.getElementById("p1"); 
5   newNode.innerHTML = " This is a newcon "; 
6   oTest.insertBefore(newNode,reforeNode); // 新建的元素节点插入到 id为p1的元素前面 
//或者oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的前面,也就是说 插入id为P1节点元素的后面。 
7} 

nextSibling :某些成分之后紧跟的要素(处于同一树层级中)。 

上述就是本文的全体内容,希望对大家的就学抱有助于,也指望大家多多照料脚本之家。

reforeNode.nextSibling :得到的是reforeNode对象的追随的下一个节点。 
previousSibling – 获得某节点的上几个同级节点。

//appendChild无法设置想要插入的明确位置
//oTest.appendChild(oP2);

//insertBefore则可以设置
//oTest.insertBefore(oP2,null);
//oTest.insertBefore(oP2,oP1);
//oTest.insertBefore(oP2,oP1.nextSibling);
//oTest.insertBefore(oP2,oP3.previousSibling);
//oTest.insertBefore(oP2,oTest.childNodes[0]);

 

好了那么有insertBefore的应该也可能有insertAfter吧? 
好那大家来用Aptana编写多个例证吗,但Aptana的智能提醒告诉作者实在未有insertAfter那几个措施 
那么就和睦定义多个罗
insertAfter定义 

1 function insertAfter(newEl, targetEl) { 
2     var parentEl = targetEl.parentNode; 
3     if(parentEl.lastChild == targetEl) { 
4         parentEl.appendChild(newEl); 
5     }else { 
6         parentEl.insertBefore(newEl,targetEl.nextSibling); 
7     } 
8 }     

 

总结: 
1、appendChild和insertBefore是做对节点的方法来使用的,而insertAfter只是自定义的一个函数 
2、insertBefore相对于appendChild来讲,比较灵活能够将新的节点插入到指标节点子节点数组中的任壹地点。 
3、使用appendChild和insertBefore来插入新的节点前提是,其兄弟节点必得有一道的父节点

 

只要只从DOM操作的性质上剖判,appendChild和insertBefore这多少个章程本身是还没太大差距的。不过insertBefore自身有所appendChild不恐怕比拟的功能,它对插入成分的岗位是足以接收的。由此它对页面大概引致的影响也更大,渲染的支付也大概越来越大。

最终顺便说一下,在IE6上,文档加载完结此前使用appendChild会出错,而采用insertBefore就不会出错。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图