在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. 程序员必须知道的六大ES6新特性

    二 .字符串扩展 1.传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法. includes():返回布尔值,表示是否找到了参 ...

  2. bootstrap轮播和百叶窗

    轮播 在bootstrap里面,有设置的图片轮播的代码: <div id="carousel-example-generic" class="carousel sl ...

  3. 对X86汇编的理解与入门

    本文描述基本的32位X86汇编语言的一个子集,其中涉及汇编语言的最核心部分,包括寄存器结构,数据表示,基本的操作指令(包括数据传送指令.逻辑计算指令.算数运算指令),以及函数的调用规则.个人认为:在理 ...

  4. Chrome浏览器扩展开发系列之四:Browser Action类型的Chrome浏览器扩展

    Browser Action类型的Google Chrome扩展程序,通常在Chrome浏览器的工具栏中,地址栏的右侧,有一个始终存在的图标.也就是说,这个图标与浏览器相关,只要安装了该Chrome扩 ...

  5. JavaScript 的 作用域

    在看了几本书之后的一些理解和自己的想法.   作用域,变量的作用范围   在ES6之前 变量的声明   只有var可以声明变量属于某个作用域,并且,也只有全局作用域和函数作用域. (没有var声明的变 ...

  6. java Static的使用

    static是一个静态修饰符,用于修饰成员(成员变量,成员函数).<thinking in java>对staic的使用场景有下面2种定义:“一种情形是只想用一个存储区域来保存一个特定的数 ...

  7. docker~linux下的部署和基本命令

    回到目录 docker是最近比较流行的容器工具,它可以帮助我们快速部署应用,尤其是在“微服务”环境下,成百个服务要去启动,停止,部署一次太麻烦,而如果把它部署到docker里,下一次应用就方便多了,如 ...

  8. 教你做一个单机版人事管理系统(Winform版)treeview与listview使用详情

    ------------------------------------------------------------------部门部分------------------------------ ...

  9. Python爬取百度贴吧数据

    本渣除了工作外,在生活上还是有些爱好,有些东西,一旦染上,就无法自拔,无法上岸,从此走上一条不归路.花鸟鱼虫便是我坚持了数十年的爱好. 本渣还是需要上班,才能支持我的业余爱好.上班时间还是尽量访问外网 ...

  10. 计算幂 51Nod 1046 A^B Mod C

    给出3个正整数A B C,求A^B Mod C.   例如,3 5 8,3^5 Mod 8 = 3. Input 3个正整数A B C,中间用空格分隔.(1 <= A,B,C <= 10^ ...