chaihongjun.me

JS在某个节点之后插入元素的封装函数

insertBefore()方法可以给当前元素的前面创建一个节点,但却没有提供给当前元素 的后面创建一个节点。那么,我们可以用已有的知识创建一个 insertAfter()函数。

/*
函数说明:用来在某个元素之后插入元素
参数说明:
newElement:表示被插入的元素
targetElement:表示目标元素
*/
function insertAfter(newElement, targetElement){
  //得到父节点
 var parent = targetElement.parentNode;
  //如果目标节点已经是最后一个元素,那么直接添加即可
 if(targetElement === parent.lastChild){
   parent.appendChild(newElement);
  }else 
       {
      //否则,在当前节点的下一个节点之前添加
      parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

当须要操作的时候只需要先使用这个函数即可:

...
 var eNode = document.getElementById("elementNode");
 //父元素的第三个子元素之后插入一个P元素
    insertAfter(p, eNode.childNode[2]);
...


知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:chaihongjun»