javascript的insertBefore、insertAfter和appendChild简单介绍
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 insertAfter(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简单介绍的更多相关文章
- 构建基于Javascript的移动web CMS入门——简单介绍
看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有. 于是,找了个演示样例開始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同一时候.也能够自己维护一个CMS系统. 构建框架 ...
- 简单介绍Javascript匿名函数和面向对象编程
忙里偷闲,简单介绍一下Javascript中匿名函数和闭包函数以及面向对象编程.首先简单介绍一下Javascript中的密名函数. 在Javascript中函数有以下3中定义方式: 1.最常用的定义方 ...
- 《javascript高级程序设计》读书笔记（一）javascript简单介绍
第一章:javascript简单介绍 Netscape Navigator 开发的javascript Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...
- 前端之JavaScript：JS简单介绍
JavaScript(JS)之简单介绍 一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名Scr ...
- JavaScript数组的简单介绍
㈠对象分类 ⑴内建对象 ⑵宿主对象 ⑶自定义对象 ㈡数组(Array) ⑴简单介绍 ①数组也是一个对象 ②它和我们普通对象功能类似,也是用来存储一些值的 ③不同的是普通对象是使用字符串作为属性名的 ...
- jQuery学习----简单介绍，基本使用，操作样式，动画
jQuery简单介绍 jq是js的插件库,说白了,jq就是一个js文件 凡事能用jq实现的,js都能实现.但是js能实现的,jq不一定能够实现 jq的引入 http://www.bootcdn.cn ...
- 关于JQuery简单介绍
jQuery是一个兼容多浏览器的javascript库,核心理念是写得更少,做得更多.如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用 ...
- iOS开发Swift篇—（一）简单介绍
iOS开发Swift篇—简单介绍 一.简介 Swift是苹果于2014年WWDC(苹果开发者大会)发布的全新编程语言 Swift在天朝译为“雨燕”,是它的LOGO 是一只燕子,跟Objective-C ...
- iOS开发Swift篇—简单介绍
iOS开发Swift篇—简单介绍 一.简介 Swift是苹果于2014年WWDC(苹果开发者大会)发布的全新编程语言 Swift在天朝译为“雨燕”,是它的LOGO 是一只燕子,跟Objective-C ...
随机推荐
- Ubuntu 16.04 搭建Android开发环境
1.Installing Java sudo add-apt-repository ppa:webupd8team/java sudo apt-get update sudo apt-get inst ...
- VS辅助工具
tfs签入策略修改工具Team Foundation Server 2015 Power Tools(tfpt) 添加签入禁止策略 \*/bin \*/obj \*/Release \*/Debug ...
- VS2010 编译 sqlite3 生成动态库和链接库
如果想以dll的方式使用sqlite而新建空的dll工程,添加sqlite源文件,会发现能生成dll,但缺乏lib函数信息映射库,单独使用dll文件是比较麻烦的,而网上多数做法是通过lib.exe手动 ...
- centos7 install rvm
不管其他,先按要求更新一下包 yum install -y gcc-c++ patch readline readline-devel zlib zlib-devel libyaml-devel li ...
- aforge通过角点匹配图片相似度
我不知道什么原因,人品不好还是啥的 ExhaustiveTemplateMatching这个类无法高精确度的匹配图片 ........... 换一种方式,就好得多 /// <summary> ...
- PhpSrom安装xdebug
1.php需要安装xdebug,这样能支持调试. 下载地址:http://www.xdebug.org/download.php,若不清楚下载版本,可将phpinfo的信息复制到下载地址页面的cust ...
- CodeForces 710B Optimal Point on a Line
递推. 先对$a[i]$进行从小到大排序. 然后计算出每个点左边所有点到这个点的距离之和$L[i]$,以及右边每个点到这个点的距离之和$R[i]$. 这两个都可以递推得到. $L\left[ i \r ...
- hdu1035
#include<stdio.h>#include<string.h>int step,n,m;int a[1010][1010];char map[11][11];void ...
- python向服务器发送邮件事例
import osimport sysimport re __author__ = 'xiaoming' import requestststr = '<div>\n<ul>\ ...
- CentOS 6.5静态IP的设置（NAT和桥接都适用）
CentOS 6.5静态IP的设置(NAT和桥接都适用) 为了方便,用Xshell来.并将IP设置为静态的.因为,在CentOS里,若不对其IP进行静态设置的话,则每次开机,其IP都是动态变化的,这样 ...