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 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
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
239军机修复记
2021/03/02 无线电
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
js微信支付实现代码
2016/12/22 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
Python中pygal绘制雷达图代码分享
2017/12/07 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
python dict乱码如何解决
2020/06/07 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
工业学校毕业生自荐信范文
2014/01/03 职场文书
法律进企业活动方案
2014/03/04 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
高老头读书笔记
2015/06/30 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
Promise面试题详解之控制并发
2021/05/14 面试题
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android