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. 下载一个应用程序，华硕手机秒变3D扫描仪

    近日,新奥尔良的3D开发先锋Scandy对外发布消息称,其取得了一个重大的突破.这次使用的是硬件巨头华硕的智能手机.该公司新的Android设备(华硕ZenFone AR)被Scandy变成一个借助开 ...

  2. java 报表到excel

    现加个jar包 http://pan.baidu.com/s/1boe5kXh   vfp8 然后代码 package makeReportToExcel; import java.io.File; ...

  3. install OwnCloud9 on CentOS7

    OwnCloud9下载地址: https://download.owncloud.org/community/owncloud-9.1.1.zip //安装配置数据库 #yum install mar ...

  4. linux xfce4普通用户 mount usb提示： Not authorized to perform operation

    问题:xfce4下,USB 硬盘能自动挂载并显示,但是普通用户操作时,提示:Not authorized to perform operation. 时间:20160928 os:gentoo + x ...

  5. 关于泛型中<T extends comparable>的理解

    public static <T extends Comparable> T min(List<T> t); 对于上面定义的泛型方法min中,Comparable指的是一个接口 ...

  6. 数据集下载 MNIST

    The Street View House Numbers (SVHN) Dataset SVHN is a real-world image dataset for developing machi ...

  7. openwrt 添加 应用（luci-application）

    openwrt 添加应用的几个步骤如下: (1)在目录 ./feeds/luci/applications 下添加要增加的应用,譬如 "luci-test" (2)里面应该包含以下 ...

  8. php获取url字符串截取路径的文件名和扩展名

    <?php //获取连接里边的id $url = 'http://www.rong123.com/cjbkscbsd/x_dfsdfs/24454_1_1.html'; function get ...

  9. androidstudio下载地址

    google官网地址 https://developer.android.com/studio/index.html

  10. 关于在vs中添加生成命令时的注意事项

    涉及到目录最好用双引号括起来,防止在目录含有空格或文字时发生错误.例如 del "$(SolutionDir)\..\xxxxxx\xxxx\Build\*.*" /s /q xc ...