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 ...
随机推荐
- C#把gird数据导出到excel
/// <summary> /// DataTable导出到Excel /// </summary> /// <param na ...
- Vue.js教程
https://aotu.io/notes/2016/10/13/vue2/?o2src=juejin&o2layout=compat
- MAC OS 常用软件及开发工具
1.各个版本的 Mac OS 链接: http://pan.baidu.com/s/1mgDtCi0 密码: 4y3u 2.Xcode xcode_4.6.3 链接: http://pan.baidu ...
- centos安装ganttproject
官网下载 http://www.ganttproject.biz/ 我的JAVA早已经安装了. 问题:root #ganttproject 提示org.bardsoftware.eclipsito.B ...
- pyhon的数据类型
1.数字 整型和浮点型 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647在64位系统上,整数的位数为64位,取值范围为-2** ...
- 在虚拟机上配置linux lab的相关经验
最近一直在研究怎样在嵌入式开发板上移植linux嵌入式系统,但是不太想花费太多钱购买开发板.然后在网上搜索相关的arm模拟器.有qemu,skyeye,armulator等,在按照网上教程一步一步实践 ...
- 移动端 web开发心得
吐槽:华为p9 内置浏览器就是个渣,各种奇葩的bug,1.如果将一个输入框的最大长度设为4,然后输入4个后,js将输入的值置空,就无法再输入了 手机上浏览器比较蛋疼的是,点击一个输入框,输入法将页面挡 ...
- zabbix 布署实践【4 服务器自动探索发现，并且自动关联模版】
使用管理员登录zabbix后,在配置---自动发现--创建发现规则 如下:我们的需求是监听办公网内openstack的所有虚拟机,在其VM创建后,自动加到zabbix监控中来,并自动关联监控模版 可以 ...
- teyi
$arr=array('haha'=>"苹果");print_r($arr['haha']); $arr=array(0=>"苹果");$arr=a ...
- php笔记(八)PHP类与对象之抽象类
<?php //通过abstract关键字定义一个抽象类 abstract class ACanEat{ //通过abstract关键字定一个不用具体实现的抽象方法eat() abstract ...