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 模拟用户单击事件
Dec 31 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
简单了解vue.js数组的常用操作
Jun 17 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
小程序外卖订单界面的示例代码
Dec 30 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 递归效率分析
2009/11/24 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python构建指数平滑预测模型示例
2019/11/21 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
python如何快速生成时间戳
2020/07/21 Python
Python 读取位于包中的数据文件
2020/08/07 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
应届生程序员求职信
2013/11/05 职场文书
优秀经理获奖感言
2014/03/04 职场文书
六五普法规划实施方案
2014/03/21 职场文书
优质服务口号
2014/06/11 职场文书
工作经历证明书范文
2014/11/02 职场文书
文言文辞职信
2015/02/28 职场文书
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript