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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 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来自动调用不同服务器上的flash
2006/10/09 PHP
PHP ajax 分页类代码
2008/11/13 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php构造函数的继承方法
2015/02/09 PHP
ArrayList类(增强版)
2007/04/04 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
Python单元测试实例详解
2018/05/25 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
大门门卫岗位职责
2013/11/30 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
实习指导老师意见
2015/06/04 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
Java 数组的使用
2022/05/11 Java/Android