在Javascript DOM编程艺术上面讲到,insertBefore(   )函数,即在已有元素前面插入一个新元素;

语法:

parentElement . insertBefore(newElement,targetElement);

新元素:你想插入的元素(newElement)

目标元素:你想把这个新元素插到哪个元素(targetElement)的前面

父元素:目标元素的父元素(parentElement)

insertBefore函数是Javascript DOM自带的函数,那么我们想在现有元素后面插入一个新元素怎么办呢

那就是创建一个insertAfter(  )函数

首先,同insertBefore函数一样,需要两个参数(目标元素新元素

javascript代码如下:

function insertAfter (newElement,targetElement){
var parent =targetElement.parentNode;
//定义目标元素的父项parent
if(parent.lastchild == targetElement]{
//如果目标元素是父元素的最后一个childnode,那么直接用appendchild()添加插入元素
parentElement.appendChild(newElement)
}else{
parentElement.insertBefore(newElement,targetElement.nextSibling);
//nestSiling 获取节点的下一个同级节点;
}
};

  

insertBefore 和 insetAfter函数详解的更多相关文章

  1. malloc 与 free函数详解<转载>

    malloc和free函数详解   本文介绍malloc和free函数的内容. 在C中,对内存的管理是相当重要.下面开始介绍这两个函数: 一.malloc()和free()的基本概念以及基本用法: 1 ...

  2. NSSearchPathForDirectoriesInDomains函数详解

    NSSearchPathForDirectoriesInDomains函数详解     #import "NSString+FilePath.h" @implementation ...

  3. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  4. Linux C popen()函数详解

    表头文件 #include<stdio.h> 定义函数 FILE * popen( const char * command,const char * type); 函数说明 popen( ...

  5. kzalloc 函数详解(转载)

    用kzalloc申请内存的时候, 效果等同于先是用 kmalloc() 申请空间 , 然后用 memset() 来初始化 ,所有申请的元素都被初始化为 0. view plain /** * kzal ...

  6. Netsuite Formula > Oracle函数列表速查(PL/SQL单行函数和组函数详解).txt

    PL/SQL单行函数和组函数详解 函数是一种有零个或多个参数并且有一个返回值的程序.在SQL中Oracle内建了一系列函数,这些函数都可被称为SQL或PL/SQL语句,函数主要分为两大类: 单行函数 ...

  7. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  8. memset函数详解

    语言中memset函数详解(2011-11-16 21:11:02)转载▼标签: 杂谈 分类: 工具相关  功 能: 将s所指向的某一块内存中的每个字节的内容全部设置为ch指定的ASCII值, 块的大 ...

  9. CreateFile函数详解

    CreateFile函数详解 CreateFile The CreateFile function creates or opens the following objects and returns ...

随机推荐

  1. 使用matplotlib绘制多轴图

    一个绘图对象(figure)可以包含多个轴(axis),在Matplotlib中用轴表示一个绘图区域,可以将其理解为子图.上面的第一个例子中,绘图对象只包括一个轴,因此只显示了一个轴(子图).我们可以 ...

  2. *bzoj1083题解

    题目: 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路口之间最多有一条道 ...

  3. AngularJs学习笔记2-控制器、数据绑定、作用域

    上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...

  4. Machine Learning and Data Mining Lecture 1

    Machine Learning and Data Mining Lecture 1 1. The learning problem - Outline     1.1 Example of mach ...

  5. Struts 框架 之 Hello World

    Struts HelloWorld 第一步   导jar包 commons-fileupload-1.2.2.jar   [文件上传相关包] commons-io-2.0.1.jar     [输入输 ...

  6. CSS3-loading动画(三)

    分享继续,图片看得不真切 在线演示demo:http://liyunpei.xyz/loading.html 十一.效果十一 四个小球分别包含于四个正方形div,将小球相对于正方形定位(top:0:l ...

  7. 有关conv_std_logic_vector和conv_integer

    原文地址:关于conv_std_logic_vector 和 conv_integer 这两个函数的使用问题作者:xiphosura std_logic_arithThis is the librar ...

  8. jsoncpp动态解析节点类型

    在互联网无处不在的今天,JSON作为轻量级数据存储格式,被广泛应用到互联网数据传输中.众所周知,JSON由键/值对.对象.数组组成,其中键/值对的值包括以下几种类型: enum ValueType { ...

  9. ThinkPhp框架:分页查询和补充框架知识

    上一篇的随笔写的是基本操作,现在可以做一些高级操作,例如有条件的查询数据,有分页的条件查询数据 一.一个条件的查询数据 查询数据自然是先要显示出数据,然后根据条件进行查询数据 (1)显示出表的数据 这 ...

  10. 封装游戏配表读取和存储(xml格式);支持行列存取,标题存取

    做服务器肯定会涉及到游戏配表,而读取游戏配表是一个必备技能; 之前一直都是采用TinyXml直接读,匹配字符串,每次加个表都是一大坨代码,看着也是心累; 因此利用了闲暇的时间封装了一个 xml配置表 ...