自定义insertAfter() 在当前元素节点的后面添加新的内容
最后更新：2018/08/24/ 20:48:52
由于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就已经封包了。
以上就是我得个人见解，有啥问题可以一起探讨。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
评论