封装函数insertBefore

封装函数insertBefore封装一个函数,功能类似insertBefore

封装一个方法insertAfter,功能类似insertBefore

我们知道 DOM 提供了 insertBefore 函数, 用于在已有的元素前插入一个新元素, 而 DOM 本身并没有提供一个 insertAfter 函数用于在已有元素后插入一个新元素, 可通过现有的 DOM 方法和属性自己手动封装一个 insertAfter 函数.

<div>
  <i></i>
  <b></b>
  <span></span>			
</div>
    <script>
        Element.prototype.insertAfter = function(targetNode, afterNode) { 
   
            let 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>

编程思想

  1. 我们在原型上面进行编程,这样就有很多好处,那么所有的Dom元素就都会有一个方法,也就是手动封装的InsertAfter
  2. 我们知道,insertBefore就是在某一个元素前面插入一个元素,那么我们就可以想着一个问题,比如说,现在有1,2,3,4四个元素,怎么在3后面插入一个元素呢,很显然我们没有这个方法,那么我们就可以想着,可以在第4个元素前面插入一个元素,不也就可以实现同样的效果吗

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/38797.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注