target.insertBefore(newChild,existingChild)
参数说明:
1.target:被添加节点和现有节点的父节点。
2.newChild:将要被插入的节点。
3.existingChild:现有的节点，新节点将会被插入到它的前面，此参数值可以为null。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>insertBefore()函数-蚂蚁部落</title>

<script type="text/javascript">

window.onload=function()

{

  var obox=document.getElementById("box");

  var lis=document.getElementsByTagName("li");

  var newLi=document.createElement("li");

  newLi.innerHTML="新蚂蚁部落";

  obox.insertBefore(newLi,lis[1]);

}

</script>

</head>

<body>

<ul id="box">

  <li>蚂蚁部落一</li>

  <li>蚂蚁部落二</li>

  <li>蚂蚁部落三</li>

  <li>蚂蚁部落四</li>

</ul>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>insertBefore()函数-蚂蚁部落</title>

<script type="text/javascript">

window.onload=function()

{

  var obox=document.getElementById("box");

  var lis=document.getElementsByTagName("li");

  var newLi=document.createElement("li");

  newLi.innerHTML="新蚂蚁部落";

  obox.insertBefore(newLi,null);

}

</script>

</head>

<body>

<ul id="box">

  <li>蚂蚁部落一</li>

  <li>蚂蚁部落二</li>

  <li>蚂蚁部落三</li>

  <li>蚂蚁部落四</li>

</ul>

</body>

</html>

二.appendChild()函数:
此函数可以在父节点的内部的尾部追加一个新的节点。

target.appendChild(newChild)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>insertBefore()函数-蚂蚁部落</title>

<script type="text/javascript">

window.onload=function()

{

  var obox=document.getElementById("box");

  var lis=document.getElementsByTagName("li");

  var newLi=document.createElement("li");

  newLi.innerHTML="新蚂蚁部落";

  obox.appendChild(newLi);

}

</script>

</head>

<body>

<ul id="box">

  <li>蚂蚁部落一</li>

  <li>蚂蚁部落二</li>

  <li>蚂蚁部落三</li>

  <li>蚂蚁部落四</li>

</ul>

</body>

</html>

三.insertAfter函数:

   虽然DOM中没有提供insertAfter方法，但是我们可以通过insertBefore方法去完成这个方法的实现：

function insert​After(newElement, targetElement) {

         var parent = targetElement​.parentNode;

         if(parent.lastChild == targetElement) {

               ​parent.appendChild(newElement);

        }​

         else {

              parent.insertBefore(newElement, targetElement.nextSibling);​

        }​

}​

下面，请看看这个函数是如何一步一步地完成工作的​

（1）首先，这个函数有两个参数:一个是将被插入的新元素，另一个是目标元素。这两个参数通过变量newElement和targetElement被传递到这个函数；

（2）把目标元素的parentNode属性值保存到变量parent里；

（3）接下来，检查目标元素是不是parent的最后一个子元素；

（4）如果是，就用appendChild方法把新元素追加到parent元素上,这样新元素就恰好被插入目标元素之后;

（5）如果不是，就把新元素插入到目标元素和目标元素的下一个兄弟元素之间，目标元素的下一个兄弟元素即目标元素的nextSibling属性，用insertBefore方法把新元素插入到目标元素的下一个兄弟元素之前。

javascript的insertBefore、insertAfter和appendChild简单介绍的更多相关文章

  1. 构建基于Javascript的移动web CMS入门——简单介绍

    看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有. 于是,找了个演示样例開始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同一时候.也能够自己维护一个CMS系统. 构建框架 ...

  2. 简单介绍Javascript匿名函数和面向对象编程

    忙里偷闲,简单介绍一下Javascript中匿名函数和闭包函数以及面向对象编程.首先简单介绍一下Javascript中的密名函数. 在Javascript中函数有以下3中定义方式: 1.最常用的定义方 ...

  3. 《javascript高级程序设计》读书笔记（一）javascript简单介绍

    第一章:javascript简单介绍 Netscape Navigator 开发的javascript   Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...

  4. 前端之JavaScript：JS简单介绍

    JavaScript(JS)之简单介绍 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名Scr ...

  5. JavaScript数组的简单介绍

    ㈠对象分类 ⑴内建对象 ⑵宿主对象 ⑶自定义对象   ㈡数组(Array) ⑴简单介绍 ①数组也是一个对象 ②它和我们普通对象功能类似,也是用来存储一些值的 ③不同的是普通对象是使用字符串作为属性名的 ...

  6. jQuery学习----简单介绍，基本使用，操作样式，动画

    jQuery简单介绍 jq是js的插件库,说白了,jq就是一个js文件 凡事能用jq实现的,js都能实现.但是js能实现的,jq不一定能够实现 jq的引入 http://www.bootcdn.cn ...

  7. 关于JQuery简单介绍

    jQuery是一个兼容多浏览器的javascript库,核心理念是写得更少,做得更多.如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用 ...

  8. iOS开发Swift篇—（一）简单介绍

    iOS开发Swift篇—简单介绍 一.简介 Swift是苹果于2014年WWDC(苹果开发者大会)发布的全新编程语言 Swift在天朝译为“雨燕”,是它的LOGO 是一只燕子,跟Objective-C ...

  9. iOS开发Swift篇—简单介绍

    iOS开发Swift篇—简单介绍 一.简介 Swift是苹果于2014年WWDC(苹果开发者大会)发布的全新编程语言 Swift在天朝译为“雨燕”,是它的LOGO 是一只燕子,跟Objective-C ...

随机推荐

  1. ios微信支付成功后点击左上角返回不走回调的问题

    最近做微信支付发现ios9以后出现的跳转其他app后左上角有返回xxx功能会影响微信支付回调,情况如图 返回后不走下面的方法 - (BOOL)application:(UIApplication *) ...

  2. CentOS7安装Zabbix

    一.Zabbix简介 Zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. Zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系 ...

  3. NYOJ-括号配对问题 <技巧性的非栈道法>

    括号配对问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3  描述 现在,有一行括号序列,请你检查这行括号是否配对. 输入 第一行输入一个数N(0<N<=100) ...

  4. SVN版本控制的使用

    下面说一说本人对SVN工具使用的理解: SVN就是一个工具,一个用来便于多人(或说团队)开发代码的版本控制工具,我们可以用它很好的把多个程序员开发出来的代码统一起来,并且保证在这个工程中不出现任何差错 ...

  5. 敏捷开发（五）- 框架SCRUM内容

    本文主要是为了检测你对SCRUM的了解和使用程度,通过本文你可以检测一下     1.你们的SCRUM项目中各个角色是否合格,    2.SCRUM上面需要的会议是否有遗留,会议过程是否正确    3 ...

  6. 获取Java的32位MD5实现

    获取Java的32位MD5实现 public static String md5(String s) { char hexDigits[] = {'0','1','2','3','4','5','6' ...

  7. glusterfs快速安装

    因为公司ES02集群使用的是SSD磁盘做的raid0,为了保证存放文件的可靠性,即在ES02集群上部署了一套分布式文件系统glusterfs.   结构 ES11    含有gfs程序,并挂载gfs在 ...

  8. php笔记(七)PHP类于对象之多态

    <?php interface ICanEat{ public function eat($food);} class Human implements ICaneat{ public func ...

  9. centos 设置删除提示

    centos 设置删除.覆盖提示 相信好多用linux的同学都用过cp这个命令来覆盖文件,但是新建的普通用户不会有任何提示,这时候心里就咯噔一下,赶紧看看新文件的是不是传上去了.如果加上提示,是不是就 ...

  10. NYOJ-102 次方求模

    次方求模 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 求a的b次方对c取余的值   输入 第一行输入一个整数n表示测试数据的组数(n<100)每组测试只有一 ...