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系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
PHP PDO操作总结
Nov 17 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
详解node HTTP请求客户端 - Request
May 05 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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与SQL注入攻击[三]
2007/04/17 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
vue axios用法教程详解
2017/07/23 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
理解Python中的With语句
2015/02/02 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
python函数与方法的区别总结
2019/06/23 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
策划助理岗位职责
2013/11/18 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
党员干部承诺书范文
2014/03/25 职场文书
合作意向协议书范本
2014/03/31 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
初三英语教学计划
2015/01/23 职场文书