document.createElement()的用法

document.createElement()是在对象中创建一个对象，要与appendChild()或insertBefore()方法联合使用。其中，appendChild()方法在节点的子节点列表末添加新的子节点。insertBefore()方法在节点的子节点列表任意位置插入新的节点。


用法：<div id="board"></div>


例1：
<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>

例2：
<script type="text/javascript">
  var board = document.getElementById("board");
  var e2 = document.createElement("select");
  e2.option[0] = new Option("加载项1","");
  e2.option[1] = new Option("加载项2","");
  e2.size = "2";
  var object = board.appendChild(e2);
</script>
效果：在标签board中加载一个下拉列表框，属性值为“加载项1”和“加载项2”

例3：
<script type="text/javascript">
  var board = document.getElementById("board");
  var e3 = document.createElement("input");
  e4.setAttribute("type","text");
  e4.setAttribute("name","q");
  e4.setAttribute("value","使用setAttribute");
  e4.setAttribute("onclick","javascript:alert('This is a test');");
  var object = board.appendChild(e4);
</script>

appendChild()和insertBefore()的不同

在下面这个div中插入一个子节点P时：<div id="test"><p id="x1">Node</P><p>Node</p></div>

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var newNode = document.createElement("p");
  newNode.innerHTML = "this is a test";
  //测试从这里开始
  //appendChild()方法
  oTest.appendChild(newNode);
  //insertBefore方法
  oTest.insertBefore(newNode,null);
</script>

通过以上代码，可以测试到一个新的节点被创建到了节点div下，且该节点是div最后一个节点。很明显，通过这个例子，可以知道appendChild和insertBefore都可以进行插入节点的操作。

oTest.insertBefore(newNode,null)，这里insertBefore有2个参数可以设置，第一个是和appendChild相同的，第二是他独有的。他不仅可以是null，还可以为：

<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElement("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "this is a test";
  oTest.insertBefore(newNode,refChild);
</script>
效果：这个例子将在xl节点前面插入一个新的节点。

又或：
<script type="text/javascript">
  var oTest = document.getElementById("test");
  var refChild = document.getElementById("x1");
  var newNode = document.createElement("p");
  newNode.innerHTML = "this is a test";
  oTest.insertBefore(newNode,refChild.nextSibling);
</script>
效果：这个例子将在xl节点的下一个节点前面插入一个新的节点。

还可为：
<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>

这个例子将在第一子节点前面插入一个新的节点，也可以通过改变childNode[0,1,...]来在其他位置插入新的节点

由此可见insertBefore()方法的特性是在已有的子节点前面插入新的节点，但例1中使用insertBefore()方法也可以在子节点列表末插入新节点的。结合两种情况，insertBefore()方法插入节点，可以在子节点列表的任意位置。

从这几个例子中得出：  
appendChild() 方法在节点的子节点列表末添加新的子节点。  
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。