document.createElement()用法及注意事項(ff下不相容)_javascript技巧

今天處理了一個日期選擇器的ie和ff的兼容問題，本來這種情況就很難找錯誤，找了好久才把錯誤定位到js中創建元素的方法document.createElement()，這個方法在ie下支援這樣創建元素

複製程式碼 程式碼如下:

var inputObj    = document.createElement
     ("");

但是這樣的情況在ff下是不相容的。
還有特別注意input元素的創建：與 input 有關的元素有很多，例如：checkbox、radio、submit、reset...，因此創建 input 是個很特殊的用法。

創造不同的 input 正確的做法是：

複製程式碼 程式碼如下:

針對 input，在 Netscape、Opera 和 Firefox 中 e.type 既可以在 appendChild 之前，也可以在其之後。但在 IE 中 type 屬性必須在前，其它屬性必須在後。

IE 創建元素，還有一個特點，就是可以連同屬性一同創建，例如：var e = document.createElement("") ; 這在其它瀏覽器中是不行的，所以我們也不支援。

總結：

•針對非 input 元素，各瀏覽器中，既可以把對元素屬性的改變寫在顯示元素（insertBefore 或 appendChild）之前，也可以在其後。
•針對 input 元素，為了相容於 IE，type 屬性寫在顯示元素（insertBefore 或 appendChild）之前，其它屬性寫在其後。
推薦：

•除了 input 元素的 type 屬性寫在顯示元素（insertBefore 或 appendChild）之前外，其它屬性都寫在顯示元素之後。
•改變屬性時，對寫在顯示元素（insertBefore 或 appendChild）之前的用 createElement 的回傳值，對寫在顯示元素之後的用 insertBefore 或 appendChild 的回傳值。

複製程式碼 程式碼如下:

1.var echkbox=document.createElement("input");   
2.echkbox.setAttribute("type","checkbox");   
3.echkbox.setAttribute("id","inputid");   
4.echkbox.setAttribute("name","inputname");   
5.echkbox.setAttribute("value","inputvalue");   
6.var addhere=document.getElementById("someElementId");   
7.addhere.appendChild(echkbox);   
8.echkbox.setAttribute("checked","checked");   
9.alert(document.getElementById("inputid").checked);