JS 封装inserAfter()方法

封装insertAfter()方法

在JS中，系统提供了Node.insertBefore(a, b)方法，在参考节点b之前插入一个拥有指定父节点Node的子节点a。

我们可以封装一个类似insertBefore()的函数 inertAfter(a, b)，实现在参考节点b之后插入一个拥有指定父节点Node的子节点a。

思路：获取参考节点afterNode的下一个元素节点，利用insertBefore操作完成相应功能

    //在原型上进行封装Element.prototype.insertAfter = function(targetNode, afterNode){// 获取afterNode节点的下一个元素节点var beforeNode = afterNode.nextElementSibling;// 处理afterNode为最后一个子元素的情况if(beforeNode == null){this.appendChild(targetNode);}else{this.insertBefore(targetNode, beforeNode);}}

eg：若HTML代码如下所示

    <div><p></P><b></b><i></i></div>

若要在后插入标签，先获取父节点和参考节点；然后创建子节点strong。

    var div = document.getElementsByTagName('div')[0];var b = doucment.getElementsByTagName('b')[0];var strong = document.createElement('strong');div.insertAfter(strong, b);console.log(div);

控制台输出如下

    <div><p></P><b></b><strong></strong><i></i></div>

JS 封装inserAfter()方法相关推荐

js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
用原生js封装get方法
get方法的封装首先我们看一下用原生js来发送请求的步骤: 1.创建请求对象 .var xhr=new XMLHttpRequest(); 2.创建open方法确认请求方式和地址 xhr.open( ...
原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
d3.js 封装一个方法更新柱状图，运用数据模板
<script>var width = 400;var height = 400;//创建画布var svg = d3.select('body').append('svg').attr( ...
原生js时间格式化方法封装
原生js时间格式化方法封装创建formatDate函数,传入date(时间)和format(格式)两个参数,简单判断format返回相应格式的时间注意:getMonth()方法获取到的月份会比实际 ...
H5 js 处理localstorage方法封装
李说: (已验证,可以直接用于开发中.) 在移动端开发中,我们未来将一根页面的数据带到另外一个页面中,需要将数据临时存放到缓存中,这时我们就用到了localstorage,相当于pc端的cookie和 ...
小程序promise封装post请求_微信小程序 es6-promise.js封装请求与处理异步进程
微信小程序 es6-promise.js封装请求与处理异步进程下载es6-promise.js置于根目录下的libs文件夹下: 在根目录utils文件夹下新建httpsPromisify.js,即定 ...
原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...

JS 封装inserAfter()方法

封装insertAfter()方法

JS 封装inserAfter()方法相关推荐

最新文章

热门文章