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 相关文章推荐
javascript格式化日期时间方法汇总
Jun 19 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
理解jquery事件冒泡
Jan 03 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
JS实现一个简单的日历
Feb 22 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
JS Canvas接口和动画效果大全
Apr 29 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php-fpm配置详解
2014/02/12 PHP
php按单词截取字符串的方法
2015/04/07 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
js实现时钟定时器
2020/03/26 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
java直接调用python脚本的例子
2014/02/16 Python
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python日志syslog使用原理详解
2020/02/18 Python
Python如何合并多个字典或映射
2020/07/24 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
Collection和Collections的区别
2016/05/02 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
高分子材料与工程专业个人求职信
2013/12/15 职场文书
市场专员岗位职责
2014/02/14 职场文书
我的1919观后感
2015/06/03 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
Python实现双向链表基本操作
2022/05/25 Python