解决原生javascript 缺少insertAfter的功能，非Jquery方法
在现有的方法后插入一个新元素，你可能会想：既然有insertBefore方法，是不是也有一个相应的insertAfter()方法。很可惜，DOM没有提供方法。
下面编写insertAfter函数，虽然DOM本身没有提供，但它确实提供了一个把一个节点插入到另一个节点之后所有工具。我们完全可以利用已有的DOM方法和属性编写一个insertAfter函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> 在现有的方法后插入一个新元素，你可能会想：既然有insertBefore方法，是不是也有一个相应的insertAfter()方法。很可惜，DOM没有提供方法。
下面编写insertAfter函数，虽然DOM本身没有提供，但它确实提供了一个把一个节点插入到另一个节点之后所有工具。我们完全可以利用已有的DOM方法和属性编写一个insertAfter函数：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
var p = document.createElement('p');
var txt = document.createTextNode('我是新插入的节点');
p.appendChild(txt); var lis = document.getElementsByTagName('li'); //insertAfter(p,lis[0])
</script>
</body>
</html>
解决原生javascript 缺少insertAfter的功能，非Jquery方法的更多相关文章
- 原生javascript 获得css样式有几种方法？
css 样式分为行内样式和 外部样式: 1.javascript 获得行内样式 : 可以使用 ele.style."属性名称"(如果遇到属性名称带有"-", ...
- 原生JavaScript技巧大收集100个
原生JavaScript技巧大收集 1.原生JavaScript实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var p ...
- JQuery官方学习资料（译）：遍历JQuery对象和非JQuery对象
JQuery提供了一个对象遍历的Utility方法$.each()和一个JQuery集合遍历方法.each(). $.each() $.each()是一个通用的方法用来遍历对象和数组, ...
- 原生JavaScript运动功能系列（四）：多物体多值链式运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- 原生JavaScript运动功能系列（二）：缓冲运动
匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
- 原生JavaScript运动功能系列（五）：定时定点运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...
- 原生JavaScript如何解决父元素查找指定类名的子元素的问题
问题:已知一个元素的类名是right并且这个元素的祖先元素的类名为parent,现在想通过原生JavaScript获得这个类名为right的元素. 我的思路:利用递归.先判断已知的祖先元素(题中的pa ...
- 100个常用的原生JavaScript函数
1.原生JavaScript实现字符串长度截取 复制代码代码如下: function cutstr(str, len) { var temp; var icount = 0; var ...
随机推荐
- Springboot 打包自带启动脚本
一直以来,我都是 gradlew build java -jar xxx.jar 来启动springboot项目的.今天突然发现,springboot自动封装了一个bootJar的任务脚本. demo ...
- 【UOJ#310】【UNR#2】黎明前的巧克力（FWT）
[UOJ#310][UNR#2]黎明前的巧克力(FWT) 题面 UOJ 题解 把问题转化一下,变成有多少个异或和为\(0\)的集合,然后这个集合任意拆分就是答案,所以对于一个大小为\(s\)的集合,其 ...
- What is Java virtual machine?
Java Virtual Machine (JVM) is a specification that provides runtime environment in which java bytec ...
- 设计模式-单例模式(winfrom带参)
一.单例模式 就是在整个代码全局中,只有一个实例.比如Log4.NET或者窗体程序. 二.实战演练 通过字段cSOCode获取窗体,窗体只有一个且cSOCode值不同获取的窗体也不同. private ...
- go-面向对象编程（上）
一个程序就是一个世界,有很多对象(变量) Golang 语言面向对象编程说明 1) Golang 也支持面向对象编程(OOP),但是和传统的面向对象编程有区别,并不是纯粹的面向对 象语言.所以我们说 ...
- Linux网络——修改配置文件
Linux网络——修改配置文件 摘要:本文主要学习了如何通过修改配置文件来设置网络参数. 配置文件 通过修改系统的配置文件为系统设置网络参数,这种方式的优点是可以永久保存,计算机重启后仍然生效.缺点是 ...
- 0基础入门学习Python（第3章）
第三章 成为高手前必须知道的一些基础知识 3.1 变量 一个值的名字,存储在内存中,我把把这块内存称为变量,大多数语言,把这个过程称之为,给变量赋值,把值存储在变量中. Python这里的做法稍有不同 ...
- Mixins and Python
什么是Mixin (混入) Mixin 这个词在Python/Ruby中经常使用, Java 中几乎看不到这个名词. 在Java 中, 我们经常定一个一个子类扩展了某个基类, 同时实现某些接口. 因为 ...
- python爬虫（2）——urllib、get和post请求、异常处理、浏览器伪装
urllib基础 urlretrieve() urlretrieve(网址,本地文件存储地址) 直接下载网页到本地 import urllib.request #urlretrieve(网址,本地文件 ...
- Java 并发（1）——线程安全
我们对并发一词并不陌生,它通常指多个任务同时执行.实际上这不完全对,“并行”才是真正意义上的同时执行,而“并发”则更偏重于多个任务交替执行.有时候我们会看见一些人一边嘴里嚼着东西一边讲话,这是并行:当 ...