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. Socket编程中 setsockopt的作用

    功能描述: 获取或者设置与某个套接字关联的选 项.选项可能存在于多层协议中,它们总会出现在最上面的套接字层.当操作套接字选项时,选项位于的层和选项的名称必须给出.为了操作套接字层的选项,应该 将层的值 ...

  2. JavaEE XML DOM解析之DOM4J

    DOM解析之DOM4J @author ixenos DOM4J常用API 读取xml文档: Document doc = new SAXReader().read("xml文件" ...

  3. 基于C++的类编程总结

    1. 类中public, protected, private这三个属性的区别: public意味着所有事物都能查询具有该属性的食物.(也即所有人可以在我不知情的情况下,查看我账户里还有多少钱). p ...

  4. 学习Sass（一）

    一.什么是sass? 写过css的都知道,css是用来改变页面样式的.但它不是一种编程语言,没有变量,函数,继承等功能,只能一条条抒写样式语句很死板.在这个工具决定效率的时代,这是不能容忍的事情.怎样 ...

  5. android studio修改项目包名

    公司项目都是用eclipse开发的,但是android studio开发已经是大势所趋了,所以在闲暇之余使用了一下androidstudio,这里对androidstudio更改项目包名做一下总结,因 ...

  6. Linux下制作静（动）态库

    关键命令: 动态库制作命令 gcc xxx.c -fPIC -shared -o libxxx.so 静态库制作命令 gcc -c xxx.c ar crv libxxx.a xxx.o 例: //h ...

  7. CodeForces 675E Trains and Statistic

    贪心,递推,线段树,$RMQ$. 假设我们记$ans[i]$是以$i$点为起点对答案的贡献,那么答案就是$\sum\limits_{i = 1}^n {ans[i]}$. $ans[i]$怎么计算呢? ...

  8. swift 经典代码收集 和 赏析

    代码1:protocol PickableEnum { var displayName: String { get } var permanentID: String { get } static v ...

  9. Python学习笔记——基础篇【第七周】———进程、线程、协程篇（socket基础）

    http://www.cnblogs.com/wupeiqi/articles/5040823.htmlhttp://i.cnblogs.com/EditPosts.aspx?postid=55437 ...

  10. UML(Unified Modeling Language)同一建模语言

    wiki定义: UML is a general-purpose, developmental, modeling language in the field of software engineer ...