JavaScript之appendChild、insertBefore和insertAfter使用说明


Posted in Javascript onDecember 30, 2010

appendChild定义
appendChild(newChild: Node) : Node
Appends a node to the childNodes array for the node.
Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+
添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中
appendChild用法
target.appendChild(newChild)
newChild作为target的子节点插入最后的一子节点之后
appendChild例子

var newElement = document.Document.createElement('label'); 
newElement.Element.setAttribute('value', 'Username:'); 
var usernameText = document.Document.getElementById('username'); 
usernameText.appendChild(newElement);

insertBefore定义
The insertBefore() method inserts a new child node before an existing child node.
insertBefore() 方法的作用是:在现有的子节点前插入一个新的子节点
insertBefore用法
target.insertBefore(newChild,existingChild)
newChild作为target的子节点插入到existingChild节点之前
existingChild为可选项参数,当为null时其效果与appendChild一样

insertBefore例子

var oTest = document.getElementById("test"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
oTest.insertBefore(newNode,oTest.childNodes[0]);

好了那么有insertBefore的应该也有insertAfter吧?
好那我们来用Aptana编写一个例子吧,但Aptana的智能提示告诉我其实没有insertAfter这个方法
那么就自己定义一个罗:)
insertAfter定义
function insertAfter(newEl, targetEl) 
{ 
var parentEl = targetEl.parentNode; 
if(parentEl.lastChild == targetEl) 
{ 
parentEl.appendChild(newEl); 
}else 
{ 
parentEl.insertBefore(newEl,targetEl.nextSibling); 
} 
}

insertAfter用法与例子
var txtName = document.getElementById("txtName"); 
var htmlSpan = document.createElement("span"); 
htmlSpan.innerHTML = "This is a test"; 
insertAfter(htmlSpan,txtName);

将htmlSpan 作为txtName 的兄弟节点插入到txtName 节点之后

总结:
1、appendChild和insertBefore是做对节点的方法来使用的,而insertAfter只是自定义的一个函数
2、insertBefore相对于appendChild来说,比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。
3、使用appendChild和insertBefore来插入新的节点前提是,其兄弟节点必须有共同的父节点

Javascript 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
KnockoutJs快速入门教程
May 16 Javascript
轮播图组件js代码
Aug 08 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
Javascript事件热键兼容ie|firefox
Dec 30 #Javascript
某人初学javascript的时候写的学习笔记
Dec 30 #Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 #Javascript
JavaScript的document对象和window对象详解
Dec 30 #Javascript
javascript hashtable 修正版 下载
Dec 30 #Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 #Javascript
javascript中创建对象的三种常用方法
Dec 30 #Javascript
You might like
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
php实现微信企业转账功能
2018/10/02 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
python logging类库使用例子
2014/11/22 Python
Python实现Const详解
2015/01/27 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python 3中的yield from语法详解
2017/01/18 Python
python安装Scrapy图文教程
2017/08/14 Python
Python实现自动发送邮件功能
2021/03/02 Python
python使用KNN算法手写体识别
2018/02/01 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
思想品德课教学反思
2014/02/10 职场文书
会计岗位职责模板
2014/03/12 职场文书
社区党建工作方案
2014/06/10 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
公司委托书范本5篇
2014/09/20 职场文书
工作保证书怎么写
2015/02/28 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
郭明义观后感
2015/06/08 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
详解Python为什么不用设计模式
2021/06/24 Python