解决原生javascript 缺少insertAfter的功能,非Jquery方法
2023-09-27 14:26:14 时间
在现有的方法后插入一个新元素,你可能会想:既然有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 Date format(js日期格式化) (转)
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- Bootstrap报错:Bootstrap's JavaScript requires jQuery
- 【javascript系列】史上最全javascript系列教程(一)
- No Javascript on this page
- Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别
- JavaScript中getter/setter的实现
- javascript eval和JSON之间的联系
- JavaScript之原型|typeof|instanceof
- 前端百题斩【010】——通俗易懂的JavaScript执行上下文
- 【JavaScript】移除父级元素
- 使用 html、css、JavaScript 、vue.js、bootstrap、jquery、layui实现轮播图 轮播图实现的内部算法 javascript、js的严格模式 自调用函数的语法
- 你可能不需要 jQuery!使用原生 JavaScript 进行开发
- IE 浏览器各个版本 JavaScript 支持情况一览表
- JavaScript UI选型及Jquery EasyUI使用经验谈
- javaScript 11 作用域·箭头函数·数组解构进阶
- javascript this详解 面向对象
- jquery,javascript -设置某一ul下的li下的 a的属性
- 再谈JavaScript闭包及应用
- jquery的height()和javascript的height总结,js获取屏幕高度
- Javascript/CSS/HTML/vue/angularJS/react/jquery/DOM前端编程经典电子书pdf下载
- 在 Vue.js 中使用任意 JavaScript 第三方库
- [从jQuery看JavaScript]-匿名函数与闭包(Anonymous Function and Closure)【转】
- JavaScript的toString()和valueOf()区别到底是什么
- 一些手写JavaScript常用的函数汇总