在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. Hugo快速搭建Blog

    以往我们搭建blog要么学习一个编程语言+Web开发框架,要么使用现成的blog系统(如WordPress).其实我们还可以使用Hugo.Hugo是由Go语言实现的静态网站生成器,它不需要数据库,所以 ...

  2. SequoiaDB版本在线升级介绍说明

    1.前言 在SequoiaDB数据库发展过程中,基本保持每半年对外发行一个正式的Release版本.并且每个新发布的Release版本相对老版本而言,性能方面都有很大的提高,并且数据库也会在新版本中加 ...

  3. JavaScript 语言基础

    js语言基础 一 基本知识 UniCode编码 区分大小写(HTML不区分/XHTML区分) Unicode转义序列 \uxxxx (\u加4位16进制表示) 注释 单行注释:// 多行注释:/* * ...

  4. java语言中的匿名类与lambda表达式介绍与总结 (Anonymous Classes and Lambda Expressions)

    2017/6/30 转载写明出处:http://www.cnblogs.com/daren-lin/p/anonymous-classes-and-lambda-expressions-in-java ...

  5. gulp inline

    在html中所有需要内敛的文件 script link 后面都要写上inline 这样才能够,内敛到文件中.

  6. Java 9 揭秘(8. JDK 9重大改变)

    Tips 做一个终身学习的人. 在本章,主要介绍以下内容: 新的JDK版本控制方案是什么 如何使用Runtime.Version类解析JDK版本字符串 JDK JRE 9的新目录布局是什么 JDK 9 ...

  7. hdu2413(二分+二分匹配)

    题意:人和外星人星球大战,人总共有H个星球,外星人有A个星球,现在人要用飞船去打外星人的飞船,要求每个人类星球只能对战一个外星球,且每个星球都开始有己知的飞船数,不论是人或外星人的星球,并每个星球都有 ...

  8. 腾讯地图JS API实现带方向箭头的线路Polyline

    最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图 ...

  9. Mac之OS系统下搭建JavaEE环境 <三> 之Eclipse 与 IntelliJ IDEA 的安装配置

    三.Eclipse 与 IntelliJ IDEA 的安装配置 1.Eclipse的安装配置 1 下载eclipse 到官网 https://www.eclipse.org/downloads/ecl ...

  10. Bash : 索引数组

    Bash 提供了两种类型的数组,分别是索引数组(indexed array)和关联数组(associative array).本文主要介绍索引数组的基本用法. 索引数组的基本特点 Bash 提供的数组 ...