木灵鱼儿

木灵鱼儿

阅读：699

最后更新：2018/08/24/ 20:48:52

自定义insertAfter() 在当前元素节点的后面添加新的内容

由于document中并没有insertAfter()这个功能，只有insertBefore()在当前元素节点的前面添加新的内容，在后面添加是没有的，但是我们可以自己做一个有这个功能得函数。

首先有几点前提条件：

  1. 该元素节点后面有其他同级得节点
  2. 如果没有同级得节点他应该就是最后一个节点
  3. 由于我们写html时会有换行得操作，导致产生了空白节点，所以我们还需要移除这个空白节点才能正常操作。

我们先写一个简单得html代码：

<body>
/*这是该元素为最后一个节点*/
<div id="box">
   <p>1</p>
   <p>2</p>
   <p>3</p>
</div>
</body>

JS代码：

window.onload = function() {
   var box = document.getElementById('box');     //找到id为box的元素节点
   var p = document.createElment('p');           //创建一个p元素节点并储存在内存中
   var text = document.createTextNode('测试文本');  //创建一个文本节点并存储在内存中
   p.appendChild(text);                             //将文本节点传入p元素节点中
   box.parentNode.appendChild(p);                   //通过box的父元素节点从最后子节点的后面传入p元素节点
}；

这是在不考虑有空白节点影响得情况下这样写，下面我们再写一下当box不是最后一个的时候：

window.onload = function() {
   var box = document.getElementById('box');     //找到id为box的元素节点
   var p = document.createElment('p');           //创建一个p元素节点并储存在内存中
   var text = document.createTextNode('测试文本');  //创建一个文本节点并存储在内存中
   p.appendChild(text);                             //将文本节点传入p元素节点中
   box.parentNode.insertBefore(p,box.nextSibling);     //通过父元素传入到box下一个同级节点得前面
}；

这是box的后面有同级节点得情况，也是不考虑空白节点得影响，下面我们写出综合情况，并删除空白节点得影响，已达到大部分情况都能适应：

window.onload = function() {
    var box = document.getElementById('box');
    var p = document.createElement('p');
    var text = document.createTextNode('测试文本');
    p.appendChild(text);
    (function insertAfter(box) {
        //删除空白
        function removewhite(node) {
            for(var i = 0;i < node.parentNode.childNodes.length;i++) {
                if(node.parentNode.childNodes[i].nodeType === 3 && /^\s+$/.test(node.parentNode.childNodes[i].nodeValue)){
                    node.parentNode.removeChild(node.parentNode.childNodes[i]);
                };
            };
            return node;
        };
        
        removewhite(box)
        if(box.parentNode.lastChild === box){
            box.parentNode.appendChild(p);
            alert('最后一个');
        }else {
            box.parentNode.insertBefore(p,box.nextSibling);
            alert('还有一个');
        };
    })(box);

};

先利用removChild()先删除box得父元素中得空白节点，这个父元素也就是body，这时的body已经没有空白节点了，所以我们直接做个判断是if去判断这个box是不是最后一个，如果是就直接appendChild()添加，不是就利用nextSibling添加，然后我用了一个自运行得函数将他们封起来，其实也不用了，如果只是单独一个功能，window.onload就已经封包了。

以上就是我得个人见解，有啥问题可以一起探讨。

文章分类 JavaScript
文章标签 length代码htmltext文本alert元素函数boxfunctionreturnvar节点eate
木灵鱼儿

木灵鱼儿

发布了 562 篇文章获得点赞 0获得阅读 699

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 699

相关文章

scss 自动生成margin和padding的classscss 自动生成margin和padding的class
深度合并对象的方法深度合并对象的方法
vue 过滤器 驼峰与短横线相互转换的方法vue 过滤器 驼峰与短横线相互转换的方法
利用JSON过滤对象和数组中指定的key属性利用JSON过滤对象和数组中指定的key属性
使用vue.draggable拖拽组件遇到的一些问题使用vue.draggable拖拽组件遇到的一些问题

目录树