在现有的方法后插入一个新元素，你可能会想：既然有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. 记录使用echarts的graph类型绘制流程图全过程（二）- 多层关系和圆形图片的设置
			
    本文主要记录在使用echarts的graph类型绘制流程图时候遇到的2个问题:对于圆形图片的剪切和多层关系的设置 图片的设置 如果用echarts默认的symbol参数来显示图片,会显示图片的原始状态 ...
    
			
    2. 
						
  2. Python-round函数
			
    round函数:对给定的数进行四舍五入,只有一个参数的情况下,是将其四舍五入后为整型,第二个参数是保留几位小数 a = round(2.523456) print(a) print('a的类型',ty ...
    
			
    3. 
						
  3. appium 使用name 定位报错 Locator Strategy 'name' is not supported for this session【appium-desktop】
			
    RF中使用 name定位 报错提示: Locator Strategy 'name' is not supported for this session 解决: 1.打开本地文件 driver.js  ...
    
			
    4. 
						
  4. Pull Request找原作者做review
			
    最近对代码库进行了一次全局替换,改了150个左右的文件,发了PR后需要找原作者确认一下,于是写了个工具做git blame,地址在这里 写完发现一个问题,如果只是新增一个函数,没有调用,是应该不用找原 ...
    
			
    5. 
						
  5. DbgUiConnectToDbg(ntdll.dll)函数逆向
			
    暂时未解决问题: 1.  [fs+0F24h]中存储着什么东西. 答案:其存放着被调试程序的DbgObject句柄._NtCreateDebugObject(ntoskrnl.exe)函数逆向分析 该 ...
    
			
    6. 
						
  6. MySQL GROUP BY 的问题
			
    拿 employee 示例数据库为例,当进行如下操作时会报错. mysql> SELECT * FROM employees GROUP BY gender; ERROR 1055 (42000 ...
    
			
    7. 
						
  7. JS基础语法---数组
			
    数组: 一组有序的数据 数组的作用: 可以一次性存储多个数据 数组的定义: 1. 通过构造函数创建数组   语法: var 数组名=new Array(); var array=new Array() ...
    
			
    8. 
						
  8. 【LeetCode】53.最大子序和
			
    最大子序和 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4], 输出: 6 解释: ...
    
			
    9. 
						
  9. 获取oracle的建表DLL语句
			
    get_ddl('TABLE','表名','实例名') from dual   select dbms_metadata.get_ddl('TABLE','RMS_CITY','RMS') from  ...
    
			
    10. 
						
  10. classmethod，staticmethod，反射，魔法方法，单例模式
			
    目录 classmethod staticmethod instance issubclass 反射 hasatter getatter setatter delatter 魔法方法 单例模式 什么是 ...
    
			
    11.