在现有的方法后插入一个新元素，你可能会想：既然有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. 拎壶学python3-----（3）python之while循环用法
			
    一.下边我们看一个简单的while循环 那怎么计数呢就让输入三次三次后退出: 二. 关于计数这个问题我们一起看一下 (1)关于计数如下: 我们发现这个计数根本停不下来,怎么才能搞成我们想要的计数次数呢 ...
    
			
    2. 
						
  2. js 根据url 下载图片     前端js 实现文件下载
			
    1.H5 download属性 function downFile(content, filename) { // 创建隐藏的可下载链接 var eleLink = document.createEl ...
    
			
    3. 
						
  3. eclipse强行停止buliding workspace
			
    使用Eclipse的过程中可能会遇到buliding workspace卡在一半走不动的情况. 出现这个情况往往是因为Eclipse太调皮了,需要拉出去打屁股,打一顿就好了. 开玩笑的,事实上出现这个 ...
    
			
    4. 
						
  4. Java8的Stream方法findAny空指针异常（NullPointerException）实例对比
			
    实战介绍 学习完Java8的Stream方法,可能你正准备大展身手,却发现遇到不少问题,本篇文章为大家带来一个findAny方法抛出java.lang.NullPointerException的场景. ...
    
			
    5. 
						
  5. java高并发系列 - 第11天:线程中断的几种方式
			
    java高并发系列第11篇文章. 本文主要探讨一下中断线程的几种方式. 通过一个变量控制线程中断 代码: package com.itsoku.chat05; import java.util.con ...
    
			
    6. 
						
  6. centos查找文件及文件内容
			
    1.查找文件 find / -name 'filename' 2.查找文件夹(目录) find / -name 'path' -type d 3.查找内容 find . | xargs grep -r ...
    
			
    7. 
						
  7. MySQL问题记录——ERROR 1728 (HY000)
			
    MySQL问题记录——ERROR 1728 (HY000) 摘要:本文主要记录了在使用MySQL的过程中遇到错误代码为1728的问题以及解决方案. 问题重现 在创建自定义函数的时候,出现了问题: my ...
    
			
    8. 
						
  8. FCC---Make a CSS Heartbeat using an Infinite Animation Count----超级好看的心跳，粉色的
			
    Here's one more continuous animation example with the animation-iteration-count property that uses t ...
    
			
    9. 
						
  9. JavaScript之找LHS查询和RHS查询
			
    LHS和RHS,当变量出现在赋值操作的左侧时进行LHS 查询,出现在右侧时进行RHS 查询. LHS 查询是试图找到变量的容器本身,从而可以对其赋值. RHS 理解成retrieve his sour ...
    
			
    10. 
						
  10. E203 CSR寄存器
			
    RiscV架构则定义了一些控制和状态寄存器(CSR),用于配置或记录一些运行的状态.CSR寄存器是处理器内核内部的寄存器,使用专有的12位地址编码空间,对一个hart,可以配置4k的CSR寄存器. 蜂 ...
    
			
    11.