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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
jQuery 插件开发指南
Nov 14 Javascript
Bootstrap表单布局
Jul 19 Javascript
vue.js todolist实现代码
Oct 29 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
js实现旋转的星空效果
Nov 01 Javascript
vue视频播放暂停代码
Nov 08 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跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
PHP错误处理函数
2016/04/03 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
模拟select的代码
2011/10/19 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
python中对list去重的多种方法
2014/09/18 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python优先队列实现方法示例
2017/09/21 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
绩效考核实施方案
2014/03/18 职场文书
三方合作协议书范本
2014/04/18 职场文书
市场营销战略计划书
2014/05/06 职场文书
服装设计专业求职信
2014/06/16 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
出差报告范文
2014/11/06 职场文书
2014年环卫工作总结
2014/11/22 职场文书
导游词之西安骊山
2019/12/03 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers