美文网首页
js封装一个insertAfter方法

js封装一个insertAfter方法

作者: 阿平搞Python | 来源:发表于2019-01-21 15:38 被阅读0次

    在js的dom操作中,大家应该都非常熟练的使用insertbefore(),可在已有的子节点前插入一个新的子节点。如果在已有的子节点后插入一个新的子节点,该怎么做呢?很多人可能会说有了insertbefore()不就够用了,要其他花里胡哨的方法干什么。问题不在此,在于很多人面试前端开发的工作,有很多面试官就出了这样一道题,现场封装一个insertAfter方法。

    思路:①有标签1,2。向标签1后插入标签<p>,我们可以利用insertbefore(),而是向标签2前面插入标签<p>。

    ②如果标签1后面任何兄弟标签都没有我们直接利用appendChild,添加兄弟标签。
    代码如下:

    <body>
         <div>
            <i></i>
            <b></b>
            <span></span>
         </div>
         <script type="text/javascript">
                Element.prototype.insertAfter=function(targetNode,afterNode){
                    var beforeNode=afterNode.nextElementSibling;
                    if(beforeNode==null){
                        this.appendChild(targetNode);                   
                    }else{
                        this.insertBefore(targetNode,beforeNode);
                    }
                }
                var div=document.getElementsByTagName('div')[0];
                var b=document.getElementsByTagName('b')[0];
                var span=document.getElementsByTagName('span')[0];
                var p=document.createElement('p');
            </script>
        </body>
    
    结果图片

    相关文章

      网友评论

          本文标题:js封装一个insertAfter方法

          本文链接:https://www.haomeiwen.com/subject/jxvcjqtx.html