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. 手工场景--controller--场景设计、场景监控、运行场景

    场景设置: 1.设置界面 2.全局设置. A:初始化: B:启动用户: C:

  2. css-ie6下实现最小，最大宽度

    _width: expression((document.documentElement.clientWidth||document.body.clientWidth)<1040?"1 ...

  3. java中使用数组和链表简单实现SJBMap

    import java.util.LinkedList; public class SJBMap { private Object[] elementData; private int size; p ...

  4. 【5】图解HTTP 笔记

    坚持.聪明.不畏困难,我将取得最后的胜利. 第一章 了解 Web 以网络基础 1. HTTP ( HyperText Transfer Protocol ): 超文本传输协议. 2. 通讯方式: 3. ...

  5. 《Intel汇编第5版》 汇编调用子过程

    一.Call和Ret指令 二.在子过程中需要自己保存可能会修改掉的寄存器值,这里可以使用USES伪指令来生成 三.一个数组求和的汇编例子 TITLE Call a Proc Demo INCLUDE ...

  6. ACM网络镜像赛

    参加了东大,南理的网络镜像赛,分别答对了两道题和三道题.感觉自己完全被虐了.发现了很多自己应该去掌握的知识,找到了自己的差距.容斥原理,博弈论,等等,这将是我努力的方向. 在跟大神同学和学姐交流的过程 ...

  7. Java中eclipse中添加源码依赖

    Window ->Preferences ->Java->instanlled jres  ->editrt.jarsource attachment一般在jdk的目录下的sr ...

  8. js 遍历json

    JSON数据如:{"options":"[{/"text/":/"王家湾/",/"value/":/" ...

  9. 逆向思维 UVA 11853

    题目大意:紫书175 思路:看书...2333 关键点就是利用已知条件来逆向思考是否能走通,而不是傻傻的从某个点开始出发啊啥的.

  10. 2015 asia xian regional F Color (容斥 + 组合数学)

    2015 asia xian regional F Color (容斥 + 组合数学) 题目链接http://codeforces.com/gym/100548/attachments Descrip ...