在现有的方法后插入一个新元素，你可能会想：既然有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. idea创建maven的web项目
			
    前言 今天搭xfire的时候,我想对xfire进行一下测试,就想弄个web工程试试,发现网上写的很多没有用的,就自己写了一下.十分精简.也介绍了如何解决maven骨架建立项目非常慢的问题. 介绍 1. ...
    
			
    2. 
						
  2. fastdfs详细安装教程
			
    前言 最近开始搞的项目涉及到 fastdfs,工欲善其事,必先利其器,于是我自己搭了一台 fastdfs 服务器.坑已经帮大家都踩过了.按照该教程100%能安装成功. 前期准备 一个centos7 一 ...
    
			
    3. 
						
  3. 织梦DEDECMS本地后台操作卡顿的解决方法
			
    打开/data/common.inc.php,把默认的$cfg_dbhost = ‘localhost‘修改为$cfg_dbhost = ‘127.0.0.1’;保存.然后你会发现后台操作起来流畅多了 ...
    
			
    4. 
						
  4. Pycharm快捷键集合
			
    运行类:Alt + Shift + F10 运行模式配置Alt + Shift + F9 调试模式配置Shift + F10 运行Shift + F9 调试Ctrl + Shift + F10 运行编 ...
    
			
    5. 
						
  5. JavaScript之找LHS查询和RHS查询
			
    LHS和RHS,当变量出现在赋值操作的左侧时进行LHS 查询,出现在右侧时进行RHS 查询. LHS 查询是试图找到变量的容器本身,从而可以对其赋值. RHS 理解成retrieve his sour ...
    
			
    6. 
						
  6. 被 GANs 虐千百遍后，我总结出来的 10 条训练经验
			
    一年前,我决定开始探索生成式对抗网络(GANs).自从我对深度学习产生兴趣以来,我就一直对它们很着迷,主要是因为深度学习能做到很多不可置信的事情.当我想到人工智能的时候,GAN是我脑海中最先出现的一个 ...
    
			
    7. 
						
  7. 深浅拷贝的应用-copy、mutableCopy
			
    ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController //如果想让li ...
    
			
    8. 
						
  8. 安卓开发笔记（三十二）:banner轮播图的实现
			
    一.activity.xml 我这里主要爬取的爱奇艺首页的图片进行轮播,应用了两个github上的开源库,一个banner的库,一个加载网络图片的库,用开源库能够极大地节省我们编写代码的时间. < ...
    
			
    9. 
						
  9. Python—实现ssl认证
			
    https://blog.csdn.net/vip97yigang/article/details/84721027 https://www.cnblogs.com/lsdb/p/9397530.ht ...
    
			
    10. 
						
  10. liteos动态加载（十三）
			
    1. 概述 1.1 基本概念 动态加载是一种程序加载技术. 静态链接是在链接阶段将程序各模块文件链接成一个完整的可执行文件,运行时作为整体一次性加载进内存.动态加载允许用户将程序各模块编译成独立的文件 ...
    
			
    11.