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
- 2
- 3
- 4
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是一个元素集合,不是真正意义的数组,不能用sort方法,转成数组再用sort排序 var arr=[]; for(var i=0; i<aLi.length; i++){ arr.push; } arr.sort{ var n1=parseInt; var n2=parseInt; return n1-n2 }); for(var j=0; j<arr.length; j++){ oUl1.appendChild;//当添加子元素的时候以前的元素已经被删除,所以不会出现重复元素 } } }
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}
- 12
- 2
- 30
- 22
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就不会出错。
相关文章
- YouTube录制涉嫌含有儿童色情内容,明一撤出广告澳门太阳娱乐手机登录
- iFixit拆解报告,XL拆解报告
- 石榴红行动澳门太阳娱乐手机登录:
- css3完结文本选中,css禁绝文本实例
- 收藏Javascript中常用的55个经典技巧_javascript技巧_脚本之家澳门太阳娱乐手机登录
- DNF的下令使用传授
- 澳门太阳娱乐手机登录:筹备开源社区,华为openEuler操作系统源代码正式开放
- 澳门太阳娱乐手机登录:js使用教程
- 澳门太阳娱乐手机登录:任天堂计划今年推出两款新的Switch机型
- 深入理解用mysql_fetch_row以数组的形式返回查询结果_php技巧_脚本之家澳门太阳娱乐手机登录