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 相关文章推荐
arguments对象
Nov 20 Javascript
javascript 避免闭包引发的问题
Mar 17 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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
PHP页面间传递参数实例代码
2008/06/05 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
javascript如何实现create方法
2019/11/04 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python迭代和迭代器详解
2016/11/10 Python
python逆向入门教程
2018/01/15 Python
Python实现分段线性插值
2018/12/17 Python
python简单实现AES加密和解密
2019/03/28 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
Python 字典中的所有方法及用法
2020/06/10 Python
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
党员大会主持词
2014/04/02 职场文书
路政管理求职信
2014/06/18 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书