在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. Gitlab维护记录

    目前互联网公司主流的代码仓库统是gitlab,类似github的实现,维护gitlab已经有两年多的时间, 下面说一下维护过程中的注意点,以及如何维护更好. 分别是搭建,首先得搭建起来,不然怎么玩,其 ...

  2. iOS9新特性之常见关键字、泛型

    #pragma mark -- nullable nullable:可以为空,只能修饰对象,不能修饰基本数据类型 // 方式一: @property (nonatomic, copy, nullabl ...

  3. H5在线编辑器优化总结

    花了三个半月做了个编辑器.自己一个人写写CSS,搞搞html,弄下JS,大部分精力都是掏鼓js,时间很仓促,后面领导帮忙写了四个页面逻辑(音频,图片,视频). 很多能优化的,以此文章记录要已经优化和未 ...

  4. BottomupSort算法 c++代码实现

    #include <iostream> using namespace std; #define N 100 int A[N]; static int n; void Initial() ...

  5. Go学习笔记(一)Let's 干

    加 Golang学习 QQ群共同学习进步成家立业 ^-^ 群号:96933959 简介     Go是Google开发的一种 静态强类型.编译型,并发型,并具有垃圾回收功能的编程语言.为了方便搜索和识 ...

  6. Wiser的Junit测试用法

    package org.jbpm.process.workitem.email; import static org.junit.Assert.assertEquals; import static ...

  7. linux中grep命令的用法

    作为linux中最为常用的三大文本(awk,sed,grep)处理工具之一,掌握好其用法是很有必要的. 首先谈一下grep命令的常用格式为:[grep  [选项]  "模式"  [ ...

  8. Selenium webdriver定位iframe里面元素两种方法

    以东方财富网登录页面为例: 在查找元素过程中,直接通过id或者xpath等找不到元素,查看页面源代码发现元素是属于iframe里,例如: <div class="wrap_login& ...

  9. 奔跑在Docker上的Spark

    转自:马踏飞燕--奔跑在Docker上的Spark 目录 为什么要在Docker上搭建Spark集群 网络拓扑 Docker安装及配置 ssh安装及配置 基础环境安装 Zookeeper安装及配置 H ...

  10. nopCommerce 3.9 大波浪系列 之 路由注册

    在Global.asax,Application_Start()方法中会进行路由注册,代码如下. public static void RegisterRoutes(RouteCollection r ...