在现有的方法后插入一个新元素，你可能会想：既然有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方法的更多相关文章
	

    
								
  1. 原生javascript 获得css样式有几种方法？
		
    css 样式分为行内样式和 外部样式: 1.javascript 获得行内样式 : 可以使用  ele.style."属性名称"(如果遇到属性名称带有"-",  ...
    
		
    2. 
						
  2. 原生JavaScript技巧大收集100个
		
    原生JavaScript技巧大收集 1.原生JavaScript实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var p ...
    
		
    3. 
						
  3. JQuery官方学习资料（译）：遍历JQuery对象和非JQuery对象
		
        JQuery提供了一个对象遍历的Utility方法$.each()和一个JQuery集合遍历方法.each(). $.each()     $.each()是一个通用的方法用来遍历对象和数组, ...
    
		
    4. 
						
  4. 原生JavaScript运动功能系列（四）：多物体多值链式运动
		
    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...
    
		
    5. 
						
  5. C#构造方法(函数)   C#方法重载   C#字段和属性  MUI实现上拉加载和下拉刷新  SVN常用功能介绍(二)  SVN常用功能介绍(一)  ASP.NET常用内置对象之——Server  sql server——子查询   C#接口  字符串的本质  AJAX原生JavaScript写法
		
    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
    
		
    6. 
						
  6. 原生JavaScript运动功能系列（二）：缓冲运动
		
    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
    
		
    7. 
						
  7. 原生JavaScript运动功能系列（五）：定时定点运动
		
    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...
    
		
    8. 
						
  8. 原生JavaScript如何解决父元素查找指定类名的子元素的问题
		
    问题:已知一个元素的类名是right并且这个元素的祖先元素的类名为parent,现在想通过原生JavaScript获得这个类名为right的元素. 我的思路:利用递归.先判断已知的祖先元素(题中的pa ...
    
		
    9. 
						
  9. 100个常用的原生JavaScript函数
		
    1.原生JavaScript实现字符串长度截取 复制代码代码如下: function cutstr(str, len) {    var temp;    var icount = 0;    var ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. java线程join方法使用方法简介
			
    本博客简介介绍一下java线程的join方法,join方法是实现线程同步,可以将原本并行执行的多线程方法变成串行执行的 如图所示代码,是并行执行的 public class ThreadTest {  ...
    
			
    2. 
						
  2. 使用pymysql模块进行封装，自动化不可或缺的数据库校验
			
    import pymysql class HandleMysql: ''' 定义一个mysql处理类 ''' def __init__(self, hostname, username, passwo ...
    
			
    3. 
						
  3. Distilling the Knowledge in a Neural Network
			
    url: https://arxiv.org/abs/1503.02531 year: NIPS 2014   简介 将大模型的泛化能力转移到小模型的一种显而易见的方法是使用由大模型产生的类概率作 ...
    
			
    4. 
						
  4. 【CF1053E】Euler tour
			
    [CF1053E]Euler tour 题面 CF 洛谷 大概意思是你有一棵树,然而你并不知道这棵树是啥.给你一个确定了一些位置的欧拉序(就是\(ST\)表求\(LCA\)的那个序列),问你是否存在一 ...
    
			
    5. 
						
  5. Spark Streaming Listener 监控批次处理延迟进行告警
			
    概述 StreamingListener 是针对spark streaming的各个阶段的事件监听机制. StreamingListener接口 //需要监听spark streaming中各个阶段的 ...
    
			
    6. 
						
  6. 从新手小白到老手大白的成长之路第二弹-WPF之UI界面之Grid面板
			
    废话不多说,接下来直接开始介绍WPF-UI界面-Grid面板 如图就是创建好了的一个WPF项目,整个界面被一个Window窗体包含起来,上面类似于什么什么网址什么的其实就相当于.net的命名空间,缺什 ...
    
			
    7. 
						
  7. linux shell中$0,$?,$!等的特殊用法
			
    记录下linux shell下的特殊用法及参数的说明 变量说明: $$Shell本身的PID(ProcessID)$!Shell最后运行的后台Process的PID$?最后运行的命令的结束代码(返回值 ...
    
			
    8. 
						
  8. Java技巧——比较两个日期相差的天数
			
    Java技巧——比较两个日期相差的天数 摘要:本文主要记录了在Java里面如何判断两个日期相差的天数. 判断两个Date类型的日期之间的天数 通过计算毫秒数判断: public static void ...
    
			
    9. 
						
  9. 这可能最简单的一种PS图片特效，零基础小白教程
			
    不少小伙伴都想学习PS,可是又觉得PS很难,学了一段时间却还是做不出什么惊艳的效果,没关系!小编今天就来教大家做一个超级简单的图片特效,就算是小白也能轻松学会!我们先来看看图片效果~ 想知道怎么做吗? ...
    
			
    10. 
						
  10. MySQL基于报错注入1
			
    0x1 判断注入点: http://www.xxxx.ro/s.php?id=1' 那么尝试闭合下单引号 http://www.xxxx.ro/s.php?id=1' --+ 0x2 枚举下表的列 h ...
    
			
    11.