在现有的方法后插入一个新元素，你可能会想：既然有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. kafka 重放 重播 从某个时间点或者offset开始消费
			
    转自: https://www.jianshu.com/p/932663e9a226 consumer.subscribe(topicA); consumer.poll(100);//正常订阅topi ...
    
			
    2. 
						
  2. windows 下命令行启动 appium-desktop
			
    启动appium-desktop如果要启动appium-desktop,双击appium.exe,启动后如下图:   启动appium-server通过下面解决方案直接启动appium-server, ...
    
			
    3. 
						
  3. idea创建maven的web项目
			
    前言 今天搭xfire的时候,我想对xfire进行一下测试,就想弄个web工程试试,发现网上写的很多没有用的,就自己写了一下.十分精简.也介绍了如何解决maven骨架建立项目非常慢的问题. 介绍 1. ...
    
			
    4. 
						
  4. solidity智能合约implicit conversion异常
			
    问题场景 在使用^0.5.10版本的solidity时,如果使用this关键字会出现以下问题. 代码: require(tokenContract.balanceOf(this) >= _num ...
    
			
    5. 
						
  5. RocketMQ(4)---RocketMQ核心配置讲解
			
    RocketMQ核心配置讲解 RocketMQ的核心配置在broker.conf配置文件里,下面我们来分析下它. 一.broker.conf配置 下面只列举一些常用的核心配置讲解. 1.broker. ...
    
			
    6. 
						
  6. C# - VS2019通过重写pictureBox实现简单的桌面截图功能
			
    前言 通过创建客制化组件(继承pictureBox),新增属性和构造方法,实现屏幕截图时需要用到的功能点.再通过监控鼠标按下.移动和释放,来获取起始点区域.最后通过操作BMP图像,实现截图的新增.修改 ...
    
			
    7. 
						
  7. python3的reload(sys)
			
    import sys reload(sys) sys.setdefaultencoding(‘utf-8’) 以上是python2的写法,但是在python3中这个需要已经不存在了,这么做也不会什么实 ...
    
			
    8. 
						
  8. Java日期时间API系列4-----Jdk7及以前的日期时间类的线程安全问题
			
    1.Date类为可变的,在多线程并发环境中会有线程安全问题. (1)可以使用锁来处理并发问题. (2)使用JDK8  Instant 或 LocalDateTime替代. 2.Calendar的子类为 ...
    
			
    9. 
						
  9. SpringBoot（五） SpringBoot整合mybatis
			
    一:项目结构: 二:pom文件如下: <parent> <groupId>org.springframework.boot</groupId> <artifa ...
    
			
    10. 
						
  10. selenium 优化 提升性能
			
    结果: 用时:7.200437545776367s用时:5.909301519393921s headless用时:4.924464702606201s headless\phone用时:4.9358 ...
    
			
    11.