js:插入节点appendChild insertBefore使用方法
首先 从定义来理解 这两个方法:
appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild)
insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild)
相同之处:插入子节点
不同之处:实现原理方法不同。
appendChild 方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点来说)。
insertBefore 方法是在已有的节点前添加新的节点(相对于子节点来说的)。
来看个这个简单的实例:在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 }
这个insertBefore 的第一个参数 和appendChild的一样,都是那个新的节点变量,而insert第二个参数不仅可以为null 。也可以这样写:
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就不会出错。
转载于:https://www.cnblogs.com/zhangym118/p/5872299.html
js:插入节点appendChild insertBefore使用方法相关推荐
- js插值法的使用_初学js插入节点appendChild insertBefore使用方法
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点,是可以在子节点列表的任意位置. 首先 从定义来理解 这两 ...
- 原生js html insert,原生js添加节点appendChild、insertBefore
1.createElement() 创建元素节点 var element=document.createElement('元素名'); 2.crateTextNode() 创建文本节点 var txt ...
- dom复制cloneNode节点与插入节点appendChild()
2, 复制节点. cloneNode(boolean) : 它有一个参数. var mes = document.createTextNode("hello world"); va ...
- [js] js操作节点的方法有哪些?
[js] js操作节点的方法有哪些? 创建节点createElement() 创建一个元素节点createTextNode() 创建一个文本节点createAttribute() 创建一个属性节点cr ...
- js获取节点的DOM操作
一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...
- js对节点 属性的操作
一. 利用节点关系进行获取 1 . 父子关系 父节点 parentElement // 获取到父节点 var parent = document.getElementById("parent ...
- js在指定的td中插入html元素,js在指定位置增加节点函数insertBefore()用法实例
本文实例讲述了js在指定位置增加节点函数insertBefore()用法.分享给大家供大家参考.具体分析如下: 函数原型如下: insertBefore(参数1,参数2):在指定位置添加节点 具体代码 ...
- js之DOM操作(插入节点insertBefore())
插入节点insertBefore() insertBefore() 方法可在已有的子节点前插入一个新的子节点. 语法: insertBefore(newnode,node); 参数: newnode: ...
- 节点插入--对比jQuery和JavaScript方法(一)
二.插入元素: 1 <div> 2 <p>面朝大海,春暖花开</p> 3 </div> (一).jQuery方法 1.在节点内部插入: 方法 说明 ap ...
最新文章
- Linux的10个游戏
- Two ways to assign values to member variables
- [转载]根据两点的经纬度求方位角和距离,等
- double free
- CouldNOTfindQt4 install qt4-dev-tools qt4-doc qt4-qtconfig qt4-demos qt4-designer
- 微服务架构学习 之 什么是微服务
- 设计模式之工厂模式(三)
- android html图片点击事件,Android TextView加载HTMl图文之添加点击事件和查看图片
- C语言编程中关于负数的%运算的判定。
- java zookeeper 主从热备_zookeeper 核心原理
- 8.4. Socket 方式
- covariance 公式_黑体辐射的近似公式
- 无缓冲I/O与有缓冲I/O区别
- 字节码指令之方法调用与返回指令
- 微型计算机控制技术学科认识,微型计算机控制技术学习心得.docx
- java把date转化成yyyymmdd_jquery 将当前时间转换成yyyymmdd格式的实现方法
- 1.3Excel--公式
- 工作分解结构(Work Breakdown Structure,简称WBS)
- 台铁预计耗资120亿新台币改善东部危险弯道
- 电脑上怎么进行pdf合并免费
热门文章
- jAvA中deprecate,在Java中使用Deprecated方法或类是错误的吗?
- diy机器人图片 手绘纸箱_废物利用,她用几个纸箱让家里变成动物园,孩子回家乐坏了!收藏...
- 仪表盘刻度调整_惊艳了我的仪表盘 那些年我遇到最美的“面孔”
- python爬虫验证码的识别_Python爬虫识别验证码
- 类库java_Java类库和常用类库介绍
- ncverilog脚本_NC-Verilog仿真详解
- php 其他页面获取session_PHP五十个提升执行效率的小技巧,和常见问题
- JAVA结课_一点心情,写java结课考试之前
- vsftp日志查看_vsftp日志xferlog格式分析(示例代码)
- w ndows7文档加密取消,win7文件夹怎么加密?windows7文件加密方法