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 相关文章推荐
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
JavaScript门道之标准库
May 26 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 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 session有效期session.gc_maxlifetime
2011/04/20 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
JavaScript模块详解
2017/12/18 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
js实现简单的随机点名器
2020/09/17 Javascript
py中的目录与文件判别代码
2008/07/16 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
企业统计员岗位职责
2013/12/13 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
家长意见书
2015/06/04 职场文书
致运动员赞词
2015/07/22 职场文书
同学聚会祝酒词
2015/08/10 职场文书
大学生党课感想
2015/08/11 职场文书