封装insertAfter

DOM 封装一个Node.insertAfter

有时候我们需要在节点后插入一个节点此时我们不能用Node.insertBefore，因此我们需要封装一个 Node.insertAfter的方法。

---

开始此前我们必须要知道的元素：

新元素：你想插入的元素(newElement);

父元素：目标元素的父元素(parentElement)；

目标元素：你要插到哪个元素(targetElement)之前;

---

代码：

Element.prototype.insertAfter = function (targetNode, afterNode) {  //在原型链创建一个方法
    var before = afterNode.nextElementSibling; // 声明一个变量，用来放目标元素的下一个兄弟节点
    if(before == null) { // 判断有没有下一个兄弟节点
        this.appendChild(targetNode); // 在父元素内添加新元素 ，在末尾加
    }else {
        this.insertBefore(targetNode, before); // 反转方法 用它的后面的兄弟节点向前加子节点
    }
};

测试：

Element.prototype.insertAfter = function (targetNode, afterNode) {  
    var before = afterNode.nextElementSibling; 
    if(before == null) { 
        this.appendChild(targetNode);
    }else {
        this.insertBefore(targetNode, before);
    }
};
var div = document.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];
var b = document.getElementsByTagName('b')[0];
var san = document.getElementsByTagName('san')[0];

var a = document.createElement('a');
div.insertAfter(a,b);
console.log(div);

结果：