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

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

124 0

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

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

0

相关文章

微信收款码
微信收款码