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 通过json自动生成Dom的代码
Apr 01 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
详解vue中组件参数
Jul 09 Javascript
配置一个vue3.0项目的完整步骤
Apr 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 disk_free_space 返回目录可用空间
2010/05/10 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
js动态创建、删除表格示例代码
2013/08/07 Javascript
jquery动态添加option示例
2013/12/30 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
Three.js学习之网格
2016/08/10 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
Python实现动态图解析、合成与倒放
2018/01/18 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
python和shell获取文本内容的方法
2018/06/05 Python
Python实现图片拼接的代码
2018/07/02 Python
Python Django基础二之URL路由系统
2019/07/18 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Python创建临时文件和文件夹
2020/08/05 Python
车间班组长的职责
2013/12/13 职场文书
业绩考核岗位职责
2014/02/01 职场文书
党性观念心得体会
2014/09/03 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技