DOM中的几个节点操作appendChild、insertBefore和insertAfter

• appendChild
  将元素添加到指定的节点中，使用如下：

  方法：target.appendChild(newChild)
  newChild作为target的子节点插入最后的一子节点之后
   //举例
  var newElement = document.Document.createElement('label'); 
  newElement.Element.setAttribute('value', 'Username:');
  var usernameText = document.Document.getElementById('username'); 
  usernameText.appendChild(newElement); 
  

• insertBefore:在现有的子节点前插入一个新的子节点，使用如下：

  方法：target.insertBefore(newChild,existingChild)
  newChild作为target的子节点插入到existingChild节点之前
  existingChild为可选项参数，当为null时其效果与appendChild一样
    //举例
    var oTest = document.getElementById("test");
    var newNode = document.createElement("p");
    newNode.innerHTML = "This is a test";
    oTest.insertBefore(newNode,oTest.childNodes[0]);
  

• 没有insertAfter，那就自己造一个喽

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

  使用：

    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来插入新的节点前提是，其兄弟节点必须有共同的父节点