js中appendChild与insertBefore的用法详细解析

appendChild定义
    添加一个节点到指定的节点的子节点数组中，读起来好象有点拗口，简单地说就是将元素添加到指定的节点中

appendChild用法

target.appendChild(newChild)
//newChild作为target的子节点插入最后的一子节点之后

appendChild例子

var newElement = document.Document.createElement('label');
newElement.Element.setAttribute('value', 'Username:');
var usernameText = document.Document.getElementById('username');
usernameText.appendChild(newElement);

insertBefore定义
    在现有的子节点前插入一个新的子节点

insertBefore用法

target.insertBefore(newChild,existingChild)
//newChild作为target的子节点插入到existingChild节点之前
//existingChild为可选项参数，当为null时其效果与appendChild一样

insertBefore例子

var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]); 

扩展：
有insertBefore，但是没有insertAfter，下面自己写一个：

function insertAfter(newEl, targetEl){
    var parentEl = targetEl.parentNode;
    if(parentEl.lastChild == targetEl){
        parentEl.appendChild(newEl);
    }else{
        parentEl.insertBefore(newEl,targetEl.nextSibling);
    }
}

insertAfter用法与例子

var txtName = document.getElementById("txtName");
var htmlSpan = document.createElement("span");
htmlSpan.innerHTML = "This is a test";
insertAfter(htmlSpan,txtName);

将htmlSpan 作为txtName 的兄弟节点插入到txtName 节点之后

总结：
    1、appendChild和insertBefore是做对节点的方法来使用的，而insertAfter只是自定义的一个函数
    2、insertBefore相对于appendChild来说，比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。
    3、使用appendChild和insertBefore来插入新的节点前提是，其兄弟节点必须有共同的父节点。