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 相关文章推荐
使用jquery实现放大镜效果
Sep 02 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
vue+Element-ui实现登录注册表单
Nov 17 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 过滤危险html代码
2009/06/29 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
js选项卡的实现方法
2015/02/09 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
Django数据库操作的实例(增删改查)
2017/09/04 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
面试后感谢信怎么写
2014/02/01 职场文书
家长建议怎么写
2014/05/15 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
人与自然观后感
2015/06/16 职场文书