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 函数使用说明
Apr 07 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
js实现磁性吸附的示例
Oct 26 Javascript
javascript canvas实现雨滴效果
Jun 09 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中的闭包(匿名函数)浅析
2015/02/07 PHP
功能强大的php分页函数
2016/07/20 PHP
nginx下安装php7+php5
2016/07/31 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
前端性能优化及技巧
2016/05/06 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python子类继承父类构造函数详解
2019/02/19 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
python3字符串操作总结
2019/07/24 Python
tensorflow的计算图总结
2020/01/12 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
给同学的道歉信
2014/01/16 职场文书
社区庆八一活动方案
2014/02/02 职场文书
银行求职信
2014/05/31 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
中班上学期个人总结
2015/02/12 职场文书
新人入职感言
2015/07/31 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python