JavaScript缺少insertAfter解决方案


Posted in Javascript onJuly 03, 2020

在现有的方法后插入一个新元素,你可能会想:既然有insertBefore方法,是不是也有一个相应的insertAfter()方法。很可惜,DOM没有提供方法。

下面编写insertAfter函数,虽然DOM本身没有提供,但它确实提供了一个把一个节点插入到另一个节点之后所有工具。我们完全可以利用已有的DOM方法和属性编写一个insertAfter函数:

JavaScript缺少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解决方案

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
老生常谈js中的MVC
Jul 25 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
原生javascript如何实现共享onload事件
Jul 03 #Javascript
Vue如何实现监听组件原生事件
Jul 03 #Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 #Javascript
JavaScrip如果基于url实现图片下载
Jul 03 #Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 #Javascript
JavaScript如何判断对象有某属性
Jul 03 #Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 #Javascript
You might like
PHP中的替代语法简介
2014/08/22 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
循环 vs 递归浅谈
2013/02/28 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Python imread、newaxis用法详解
2019/11/04 Python
Python3 assert断言实现原理解析
2020/03/02 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
pandas数据拼接的实现示例
2020/04/16 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
差生评语大全
2014/05/04 职场文书
小学生运动会报道稿
2014/09/12 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python