木灵鱼儿

木灵鱼儿

阅读：1507

最后更新：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
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 1507

版权申明

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

one
two
three

关于作者

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

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

目录树