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 相关文章推荐
模仿jQuery each函数的链式调用
Jul 22 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 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.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
Python如何将模块打包并发布
2020/08/30 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
什么是Rollback Segment
2013/04/22 面试题
幼儿园教师获奖感言
2014/03/11 职场文书
活动总结怎么写
2014/04/28 职场文书
第二课堂活动总结
2014/05/07 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
护士实习自荐信
2015/03/06 职场文书
2019军训心得体会
2019/06/27 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
Python实现双向链表基本操作
2022/05/25 Python