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动态调整iframe高度的代码
Apr 10 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 Javascript
如何利用node转发请求详解
Sep 17 Javascript
QT与javascript交互数据的实现
May 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
PHP之短标签开启设置
2013/06/17 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
python定位xpath 节点位置的方法
2019/08/27 Python
python文字转语音实现过程解析
2019/11/12 Python
django修改models重建数据库的操作
2020/03/31 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
电信营业员自我评价分享
2014/01/17 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
春游踏青活动方案
2014/08/14 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB