初学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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
Laravel5中contracts详解
2015/03/02 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
php自动载入类用法实例分析
2016/06/24 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
php跨域调用json的例子
2013/11/13 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
详解js私有作用域中创建特权方法
2016/01/25 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python socket 套接字实现通信详解
2019/08/27 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
python的flask框架难学吗
2020/07/31 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
最热门的自我评价
2013/12/30 职场文书
表彰先进的通报
2014/01/31 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
预备党员承诺书
2014/03/25 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
Golang 结构体数据集合
2022/04/22 Golang