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 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 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
PHP Memcached应用实现代码
2010/02/08 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
js 图片等比例缩放代码
2010/05/13 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
Python中字典的基本知识初步介绍
2015/05/21 Python
python3.6的venv模块使用详解
2018/08/01 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
解决python flask中config配置管理的问题
2019/07/26 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
python手写均值滤波
2020/02/19 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
英国电子专家:maplin
2019/09/04 全球购物
聚美优品恶搞广告词
2014/03/14 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers