js中为element扩展insertAfter()方法

来源：互联网发布：comic studio mac版编辑：程序博客网时间：2024/05/22 01:26

js中有insertBefor()方法，可以将新节点添加到指定节点的前面，而没有相对的方法可
以将新节点添加到指定节点后边的方法。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>InsertAfter</title><script>Element.prototype.insertAfter = function  (newNode,targetNode){//获取指定节点的下一个兄弟节点和父节点，为使用insertBefor()做准备var nextNode = targetNode.nextSibling;var fatherNode = targetNode.parentNode;//调用insertBefor()将新节点添加到指定节点的下一个兄弟节点的前面 //以此实现将新节点添加到指定节点后后一位fatherNode.insertBefore(newNode,nextNode);}</script></head><body><div id="box"><h2 id="d2">2</h2><h2 id="d3">3</h2><h2 id="d4">4</h2><h2 id="d5">5</h2></div><script>//先指明父节点var box = document.getElementById("box");//指明要指定指点var d1 = document.createElement("h2");//创建新节点var d2 = document.getElementById("d2");var newtext = 1;var d1Text = document.createTextNode(newtext);d1.appendChild(d1Text); //调用insertAfter()box.insertAfter(d1,d2);</script></body></html>

调用前

调用后

0 0