js中AppendChild与insertBefore的用法详细解析


Posted in Javascript onDecember 16, 2013

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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
js 对象是否存在判断
Jul 15 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
jquery 插件学习(一)
Aug 06 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 #Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 #Javascript
JS冒泡事件的快速解决方法
Dec 16 #Javascript
JS批量操作CSS属性详细解析
Dec 16 #Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 #Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 #Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 #Javascript
You might like
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
生成卡号php代码
2008/04/09 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python解析树及树的遍历
2016/02/03 Python
python中redis的安装和使用
2016/12/04 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
wxPython色环电阻计算器
2019/11/18 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
html5弹跳球示例代码
2013/07/23 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
财务科科长岗位职责
2014/03/10 职场文书
总经理工作职责范文
2014/03/14 职场文书
小学生期末评语大全
2014/04/21 职场文书
市场策划求职信
2014/08/07 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL