JavaScript缺少insertAfter解决方案
更新时间：2020年07月03日 14:43:03 作者：奔跑的太阳花
这篇文章主要介绍了JavaScript缺少insertAfter解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
在现有的方法后插入一个新元素，你可能会想：既然有insertBefore方法，是不是也有一个相应的insertAfter()方法。很可惜，DOM没有提供方法。
下面编写insertAfter函数，虽然DOM本身没有提供，但它确实提供了一个把一个节点插入到另一个节点之后所有工具。我们完全可以利用已有的DOM方法和属性编写一个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-Mozilla和IE中的一个函数直接量的问题分析
Javascript-Mozilla和IE中的一个函数直接量的问题分析...2007-08-08
大家都知道在ES6中引进的一种新型的字符串字面量语法-模板字符串，下面这篇文章主要给大家介绍了关于ES6学习教程之模板字符串的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-10-10
本文主要介绍了js实现不提示直接关闭网页窗口的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
Attribute是属性的意思，文章仅对部分兼容IE和FF的Attribute相关的介绍。具体内容详情大家参考下本文2017-04-04
下面小编就为大家带来一篇常用原生js自定义函数总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要为大家详细介绍了如何使用JavaScript提取 PDF 图片,即把每一页里的多张图片都提取出来,不是把一整页都转换为一张图片,感兴趣的可以了解下2025-03-03
这篇文章主要为大家详细介绍了BootStrap tooltip提示框使用小结 ,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了JS使用Date对象实时显示当前系统时间,涉及javascript基于定时器动态操作Date对象相关实现技巧,需要的朋友可以参考下2018-08-08
在移动端，侧滑菜单是一个很常用的组件，本文就详细的介绍小程序原生实现左滑抽屉菜单，具有一定的参考价值，感兴趣的可以了解一下2021-07-07
这篇文章主要介绍了浅谈webpack性能榨汁机(打包速度优化)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
最新评论