document.createElement()是在對象中創建一個對象，要與appendChild() 或 insertBefore()方法聯合使用。其中，appendChild() 方法在節點的子節點列表末添加新的子節點。insertBefore() 方法在節點的子節點列表任意位置插入新的節點。
下面，舉例說明document.createElement()的用法。<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>
效果：在標簽board中加載一個按鈕，屬性值為“這是測試加載的小例子”。
例2：
<script type="text/javascript">
var board = document.getElementById("board");
var e2 = document.createElement("select");
e2.options[0] = new Option("加載項1", "");
e2.options[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(e3);
</script>
效果：在標簽board中加載一個文本框，屬性值為“使用setAttribute”。 當點擊這個文本框時，會彈出對話框“This is a test!”。
根據上面例子，可以看出，可以通過加載對象的屬性來設置，參數是相同的。使用e.type="text" 和 e.setAttribute("type","text")效果是一致的。
下面，我們用實例來講述一下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最后一個節點。很明顯，通過這個例子，可以知道appendChildhild和insertBefore都可以進行插入節點的操作。
在上面的例子中有這樣一句代碼：oTest.insertBefore(newNode,null) ，這里insertBefore有2個參數可以設置，第一個是和appendChild相同的，第二卻是它特有的。它不僅可以為null，還可以為：
<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);
</script>
效果：這個例子將在x1節點前面插入一個新的節點
又或：
<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>
效果：這個例子將在x1節點的下一個節點前面插入一個新的節點
還可為：
<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>
這個例子將在第一子節點前面插入一個新的節點，也可以通過改變childNodes[0,1,...]來在其它位置插入新的節點
由於可見insertBefore()方法的特性是在已有的子節點前面插入新的節點，但例一中使用insertBefore()方法也可以在子節點列表末插入新節點的。兩種情況結合起來，發現insertBefore()方法插入節點，是可以在子節點列表的任意位置。
從這幾個例子中得出：
appendChild() 方法在節點的子節點列表末添加新的子節點。
insertBefore() 方法在節點的子節點列表任意位置插入新的節點。
今天處理了一個日期選擇器的ie和ff的兼容問題，本來這種情況就很難找錯誤，找了好久才把錯誤定位到js中創建元素的方法document.createElement()，這個方法在ie下支持這樣創建元素
var inputObj = document.createElement
("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;' " readonly >");
但是這樣的情況在ff下是不兼容的。
還有就是非凡注重input元素的創建：與 input 有關的元素有很多，比如：checkbox、radio、submit、reset...，因此創建 input 是個很非凡的用法。
創建不同的 input 正確的做法是：
<div id="board"></div>
<script type="text/javascript">
<!--
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "radio"; //緊接着上一行寫
var obj = board.appendChild(e);
obj.checked = true;
//如下寫法也是正確的：
//e.checked = true;
-->
</script>
針對 input，在 Netscape、Opera 和 Firefox 中 e.type 既可以在 appendChild 之前，也可以在其之后。但在 IE 中 type 屬性必須在前，其它屬性必須在后。
IE 創建元素，還有一個特點，就是可以連同屬性一同創建，比如：var e = document.createElement("<input type='radio' name='r' value='1' />"); 這在其它瀏覽器中是不行的，所以我們也不支持。
總結：
- 針對非 input 元素，各瀏覽器中，既可以把對元素屬性的改變寫在顯示元素（insertBefore 或 appendChild）之前，也可以在其后。
- 針對 input 元素，為了兼容 IE，type 屬性寫在顯示元素（insertBefore 或 appendChild）之前，其它屬性寫在其后。
推薦：
- 除了 input 元素的 type 屬性寫在顯示元素（insertBefore 或 appendChild）之前外，其它屬性都寫在顯示元素之后。
-
改變屬性時，對寫在顯示元素（insertBefore 或 appendChild）之前的用 createElement 的返回值，對寫在顯示元素之后的用 insertBefore 或 appendChild 的返回值。
document.getElementsByName 和 document.getElementsByTagName
當頁面上的控件同名且多個的時候,從程序的嚴密角度出發,需要判定長度,而且有長度和沒長度是兩種引用方法.
oEle= document.all.aaa ;//這里有一個aaa的對象,但我們不知道它現在長度是多少,所以沒辦法對它操作.因此,我們要先做判定長度的過程.如下:
if(oEle.length){}else{};
在兩種情況下,花括號里面的內容寫法也是不一樣的:
if(oEle.length){
for(var i = 0 ;i<oEle.length;i++){
oEle[i].value..
}
}
else{
oEle.value..
};
但是這樣寫是不是太復雜了點?而且當花括號里面的代碼比較多的時候,我們要寫兩遍代碼,暈了先~
還好有
document.getElementsByName()
這個方法.它對一個和多個的處理是一樣的,我們可以用:
oEle = document.getElementsByName('aaa')
來引用
當oEle只有1個的時候,那么就是oEle[0],有多個的時候,用下標法oEle[i]循環獲得,是不是很簡單?
值得一提的是它對Name和ID的同樣有效的. (它只能應用到document對象)
<div id=radiodiv language=javascript >
<INPUT name=radio1 value=1 type="radio">
<INPUT name=radio1 value=0 type="radio" CHECKED>
</div>
document.getElementsByName("radio1").item(0).value 結果是 1
但是.相對應的,還有另一個方法,可以應用的對象會更廣一點:
getElementsByTagName
<div id=radiodiv language=javascript >
<INPUT name=radio1 value=1 type="radio" id=myRadio1>
<INPUT name=radio1 value=0 type="radio" id=myRadio2 CHECKED >
</div>
radiodiv.getElementsByTagName("input").item(0).value 結果是 1
,比如我知道了一個<DIV ID='aaa'><input name=input1 value=1 type=radio ><input name=input1 value=2 type=radio>......</DIV>我要取DIV里面的所有input,這樣寫就可以了:
aaa.getElementsByTagName('INPUT')
這樣就有效的可以和別的DIV(比如說有個叫bbb的DIV,里面的也是一樣的input)相區別.
同getElementsByTagName相對應,
還有一個document.body.all.tags()
能用這個方法的對象比getElementsByTagName要小得多.但比getElementsByName要多.
到這里我們還要提一下getElementById
它也是只有document對象才能使用,而且返回的是數組的第一個元素,呵呵,它的方法名都寫明了是getElement而不是getElements
<div id=radiodiv language=javascript >
<INPUT name=radio1 value=1 type="radio" id=myRadio1 >
<INPUT name=radio1 value=0 type="radio" id=myRadio2 value="myVal2" CHECKED >
</div>