我转过几个弯绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留喝过几壶酒
不过年少白头道义放胸口
倘若明天之后遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
又过了几个弯算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休

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

木灵鱼儿

927 天前JavaScript

268 0 0

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

首先有几点前提条件：

该元素节点后面有其他同级得节点
如果没有同级得节点他应该就是最后一个节点
由于我们写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就已经封包了。

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