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);
结果: