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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
vue中axios的二次封装实例讲解
Oct 14 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
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
php实现简易计算器
2020/08/28 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python的argparse库使用详解
2018/10/09 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python帮你识破双11的套路
2019/11/11 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
《理想的风筝》教学反思
2014/04/11 职场文书
志愿者活动总结范文
2014/04/26 职场文书
在校学生证明格式
2015/06/24 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
virtualenv隔离Python环境的问题解析
2022/06/21 Python
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android