正在加载中

最后更新于 2018年08月24日

由于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就已经封包了。

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

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao

登录