在指定节点插入html元素


// 原始 js 在指定位置插入 html 元素   <br>
常用的函数: document.createElement()是在对象中创建一个对象、 appendChild() 、insertBefore() <br>
   通过 document.createElement() 创建一个元素，然后使用appendChild() 或 insertBefore() 把创建的元素插入到指定位置  <br>
   appendChild(), 把元素插入到其父级节点元素的末尾 （相对父元素）   // http://www.w3school.com.cn/xmldom/met_element_appendchild.asp   <br>
   insertBefore() 把元素插入到与其平级的指定节点元素的前面 (相对同级元素)。或者解释为 在已有的子节点之前插入一个新的子节点  参考： http://www.w3school.com.cn/xmldom/met_element_insertbefore.asp  <br>
     elementNode.insertBefore(new_node,existing_node)    new_node 必需。要插入的节点   existing_node  必需。已有节点。在此节点之前插入新节点。
     注释：Internet Explorer 会忽略节点之间生成的空白文本节点（比如换行字符），而 Mozilla 不这么做。因此，在下面的例子中，我们使用一个函数来检查最后一个子节点的节点类型。

元素节点的节点类型是 1，因此如果最后一个子节点不是元素节点，则移动到上一个节点，并检查这个节点是否是元素节点。这个过程一直会持续到找到最后一个属于元素节点的子节点为止。通过这个方法，在 Internet Explorer 和 Mozilla 中都会得到正确的结果。

<hr>


<div id="board"></div>

<script type="text/javascript">
    var board = document.getElementById("board");
    var e = document.createElement("input");
    e.type = "button";
    e.value = "这是测试加载的小例子";
    var object = board.appendChild(e);
</script>

<hr>

<div id="board2"></div>

<script type="text/javascript">
    var board2 = document.getElementById("board2");
    var e2 = document.createElement("select");
    e2.options[0] = new Option("加载项1", "");
    e2.options[1] = new Option("加载项2", "");
    e2.size = "2";
    var object = board2.appendChild(e2);
</script>


<script type="text/javascript">
  var oTest = document.getElementById("test");
  var newNode = document.createElement("p");
  newNode.innerHTML = "This is a test";
  oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>

参考 ：
http://www.cnblogs.com/ATree/archive/2011/09/26/JS-appendChild-insertBefore.html
http://www.cnblogs.com/penny/archive/2008/09/01/1281293.html