初学js插入节点appendChild insertBefore使用方法


Posted in Javascript onJuly 04, 2011

首先 从定义来理解 这两个方法:
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()方法插入节点,是可以在子节点列表的任意位置。

呵呵呵。。。有些方法不只是作用于定义的那些特性,只要 符合语法,结合一些属性总会有意想不到的收获。

作为初学者,我懂的不多,或许我的理解还很浅薄,有些可能理解错了,希望看到的能够给我提点下,我不求别的,我只希望在这里记录点点滴滴和吸取大家的建议 来促进我的成长。。。

Javascript 相关文章推荐
检测jQuery.js是否已加载的判断代码
May 20 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 #Javascript
js静态方法与实例方法分析
Jul 04 #Javascript
JavaScript 变量作用域分析
Jul 04 #Javascript
JavaScript XML和string相互转化实现代码
Jul 04 #Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 #Javascript
jQuery 对Select的操作备忘记录
Jul 04 #Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 #Javascript
You might like
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
由php if 想到的些问题
2008/03/22 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
PHP编写RESTful接口
2016/02/23 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Python实现的石头剪子布代码分享
2014/08/22 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
Python打印输出数组中全部元素
2018/03/13 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
python中for in的用法详解
2020/04/17 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
会议活动邀请函
2014/01/27 职场文书
观看建国大业观后感
2015/06/01 职场文书
员工考勤管理制度
2015/08/06 职场文书