JS(JavaScript)插入节点的方法appendChild与insertBefore
2016-05-15 15:27
696 查看
首先 从定义来理解 这两个方法:
appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild)
insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild)
相同之处:插入子节点
不同之处:实现原理方法不同。
appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。
insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)。
来看个这个简单的实例:在id为box-con 的末尾添加一个子节点div
这个insertBefore 的第一个参数 和appendChild的一样,都是那个新的节点变量,而insert第二个参数不仅可以为null 。也可以这样写呢
或者
这里想说的是 nextSibling :某个元素之后紧跟的元素(处于同一树层级中)。
reforeNode.nextSibling :取得的是reforeNode对象的紧跟着的下一个节点。
previousSibling - 取得某节点的上一个同级节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。
appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild)
insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild)
相同之处:插入子节点
不同之处:实现原理方法不同。
appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。
insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)。
来看个这个简单的实例:在id为box-con 的末尾添加一个子节点div
<div class="btns"><input type="button" value="插入元素" id="creatbtn"/></div> <div id="box-one"> <p class="con2" id="p1">1</p> <p class="con2">2</p> <p class="con2">3</p> </div>
window.onload =function () { var btn = document.getElementById("creatbtn"); btn.onclick =function() { insertEle(); } } function insertEle() { var oTest = document.getElementById("box-one"); var newNode = document.createElement("div"); newNode.innerHTML =" This is a newcon "; //oTest.appendChild(newNode); oTeset.insertBefore(newNode,null); // 这两种方法均可实现 }
这个insertBefore 的第一个参数 和appendChild的一样,都是那个新的节点变量,而insert第二个参数不仅可以为null 。也可以这样写呢
function insertEle() { var oTest = document.getElementById("box-one"); var newNode = document.createElement("div"); var reforeNode = document.getElementById("p1"); newNode.innerHTML =" This is a newcon "; oTest.insertBefore(newNode,reforeNode); //新建的元素节点插入到 id为p1的元素前面 }
或者
function insertEle() { var oTest = document.getElementById("box-one"); var newNode = document.createElement("div"); var reforeNode = document.getElementById("p1"); newNode.innerHTML =" This is a newcon "; oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的 前面,也就是说 插入id为P1节点元素的后面。 }
这里想说的是 nextSibling :某个元素之后紧跟的元素(处于同一树层级中)。
reforeNode.nextSibling :取得的是reforeNode对象的紧跟着的下一个节点。
previousSibling - 取得某节点的上一个同级节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。
相关文章推荐
- Android开发,30行代码集成图片轮播RollViewpager,你说快吗?
- iOS开发系列—Objective-C之Foundation框架
- iOS @synchronized(self) 解释
- 记一次iphone 微信内置浏览器跨域无法获取cookie问题的解决方法
- iOS @synchronized 详解
- Android 添加背景音乐代码实现,以及创建音频文件夹
- (转载)Unity3d中的属性(Attributes)整理
- Object类和String类equals方法的区别
- iOS开发里的线程安全机制
- Part2:Unity学习笔记十七 - Space Shooter(从视频最后一课向Done_Main.unity场景修改的过程)
- Unity3D NGUI学习(一)血条
- TextView
- android layout 的小知识
- 【Android】图像增强
- IOS 保存图片至相册
- android生成随机汉字
- Android自定义圆角对话框
- Android Picasso图片加载库源码剖析
- cocos2d-x 坐标转换总结
- android矢量图之VectorDrawable ,自由又方便的填充色彩