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. 【转】深入理解Major GC, Full GC, CMS

    声明:本文转自http://blog.csdn.net/iter_zc/article/details/41825395,转载务必声明. 很多人都分不清Major GC, Full GC的概念,事实上 ...

  2. 一步步优化JVM四：决定Java堆的大小以及内存占用

    到目前为止,还没有做明确的优化工作.只是做了初始化选择工作,比如说:JVM部署模型.JVM运行环境.收集哪些垃圾回收器的信息以及需要遵守垃圾回收原则.这一步将介绍如何评估应用需要的内存大小以及Java ...

  3. canvas实现画板功能（渐变、动画、阴影...）

    刚刚在博客园落户了,希望能在这认识更多大神,希望能和大家交好朋友. 闲来无事,把以前用canvas写的画板代码改进了一番,用Html5提供的表单标签给其 加了一个选择颜色的功能,因此发现了该标签的一个 ...

  4. ipv4属性无法打开

    设置开机启动项: 点击左下角开始或windows+R-->msconfig 打开组策略:Windows+R-->输入gpedit.msc ipv4属性打不开  经过查看组策略什么未配置  ...

  5. [DP之计数DP]

    其实说实在 我在写这篇博客的时候 才刚刚草了一道这样类型的题 之前几乎没有接触过 接触过也是平时比赛的 没有系统的做过 可以说0基础 我所理解的计数dp就是想办法去达到它要的目的 而且一定要非常劲非常 ...

  6. Hadoop无法上传文件查找原因

    部署了集群,上传测试文件到HDFS文件系统的时候出现问题.could only be replicated to 0 nodes, instead of 1,如下图所示: 度娘寻找解决方案: 博客链接 ...

  7. 面试题-Java基础-垃圾回收

    1.Java中垃圾回收有什么目的?什么时候进行垃圾回收? 垃圾回收的目的是识别并且丢弃应用不再使用的对象来释放和重用资源. 2.System.gc()和Runtime.gc()会做什么事情? 这两个方 ...

  8. [Jmeter]jmeter之初体验（windows下的jmeter）

    一.环境准备 1.安装JDK(传送门:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...

  9. layer1.8UI

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  10. js string 转 int 注意的问题——parseInt

    < script > var str = '1250';alert(Number(str)); //得到1250 alert(parseInt(str)); //得到1250 var st ...