封装函数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个元素前面插入一个元素，不也就可以实现同样的效果吗