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 相关文章推荐
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
python实现简单猜单词游戏
2020/12/24 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
技校毕业生个人学习的自我评价
2014/02/21 职场文书
家长写给老师的建议书
2014/03/13 职场文书
工程质量承诺书
2014/03/27 职场文书
农村葬礼主持词
2014/03/31 职场文书
企业宣传工作方案
2014/06/02 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
教育合作协议范本
2014/10/17 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
《观察物体》教学反思
2016/02/17 职场文书