快捷導(dǎo)航

document.createElement()用法及注意事項(xiàng)(ff下不兼容)

更新時(shí)間：2013年03月13日 17:24:19 投稿：mdxy-dxy

今天處理了一個(gè)日期選擇器的ie和ff的兼容問(wèn)題，本來(lái)這種情況就很難找錯(cuò)誤，找了好久才把錯(cuò)誤定位到j(luò)s中創(chuàng)建元素的方法document.createElement()，這個(gè)方法在ie下支持這樣創(chuàng)建元素

復(fù)制代碼代碼如下:

var inputObj    = document.createElement

     ("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;' " readonly >");

但是這樣的情況在ff下是不兼容的。
還有就是特別注意input元素的創(chuàng)建：與 input 有關(guān)的元素有很多，比如：checkbox、radio、submit、reset...，因此創(chuàng)建 input 是個(gè)很特殊的用法。

創(chuàng)建不同的 input 正確的做法是：

復(fù)制代碼代碼如下:

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

<script type="text/javascript">

<!--

var board = document.getElementById("board");

var e = document.createElement("input");

e.type = "radio"; //緊接著上一行寫(xiě)

var obj = board.appendChild(e);

obj.checked = true;

//如下寫(xiě)法也是正確的：

//e.checked = true;

-->

</script>

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

IE 創(chuàng)建元素，還有一個(gè)特點(diǎn)，就是可以連同屬性一同創(chuàng)建，比如：var e = document.createElement("<input type='radio' name='r' value='1' />"); 這在其它瀏覽器中是不行的，所以我們也不支持。

總結(jié)：

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

•除了 input 元素的 type 屬性寫(xiě)在顯示元素（insertBefore 或 appendChild）之前外，其它屬性都寫(xiě)在顯示元素之后。
•改變屬性時(shí)，對(duì)寫(xiě)在顯示元素（insertBefore 或 appendChild）之前的用 createElement 的返回值，對(duì)寫(xiě)在顯示元素之后的用 insertBefore 或 appendChild 的返回值。

復(fù)制代碼代碼如下:

var echkbox=document.createElement("input");    

echkbox.setAttribute("type","checkbox");    

echkbox.setAttribute("id","inputid");    

echkbox.setAttribute("name","inputname");    

echkbox.setAttribute("value","inputvalue");    

var addhere=document.getElementById("someElementId");    

addhere.appendChild(echkbox);    

echkbox.setAttribute("checked","checked");    

alert(document.getElementById("inputid").checked);

<!--document方法：
getElementById(id)                            返回指定結(jié)點(diǎn)的引用
getElementsByTagName(name)       返回文檔中所有匹配的元素的集合
createElement(name)                         創(chuàng)建指定類(lèi)型的新結(jié)點(diǎn)
createTextNode(text)                         創(chuàng)建一個(gè)純文本結(jié)點(diǎn)
element方法：
getAttribute(id)                                   返回指定屬性的值
setAttribute(id,value)                         給屬性賦值
removeAttribute(id)                           移除指定屬性和它的值
getElementsByTagName(name)       返回結(jié)點(diǎn)內(nèi)所有匹配的元素的集合
node方法：
appendChild(child)                             給指定結(jié)點(diǎn)添加一個(gè)新的子結(jié)點(diǎn)
removeChild(child)                             移除指定結(jié)點(diǎn)的子結(jié)點(diǎn)
replaceChild(newChild,oldChild)       替換指定結(jié)點(diǎn)的子結(jié)點(diǎn)
insertBefore(newChild,refChild)       在同一層級(jí)的結(jié)點(diǎn)前面插入新結(jié)點(diǎn)
hasChildNodes()                                 如果結(jié)點(diǎn)有子結(jié)點(diǎn)則返回true
node屬性：
nodeName                                         以字符串的格式存放結(jié)點(diǎn)的名稱(chēng)
nodeType                                           以整型數(shù)據(jù)格式存放結(jié)點(diǎn)的類(lèi)型
nodeValue                                          以可用的格式存放結(jié)點(diǎn)的值
parentNode                                        指向結(jié)點(diǎn)的父結(jié)點(diǎn)的引用
childNodes                                         指向子結(jié)點(diǎn)的引用的集合
firstChild                                            指向子結(jié)點(diǎn)結(jié)合中的第一個(gè)子結(jié)點(diǎn)的引用
lastChild                                             指向子結(jié)點(diǎn)結(jié)合中的最后一個(gè)子結(jié)點(diǎn)的引用

動(dòng)態(tài)加載js

復(fù)制代碼代碼如下:

var Rash=true; 

var msg=""; 

function norash() 

{ 

   if (confirm("確定要取消嗎")) 

   Rash=false; 

} 

function rashit() 

{ 

    setInterval('getrss()',Inttime); 

} 

function getrss() 

{ 

if (Rash==true) 

{ 

     head=document.getElementsByTagName('head').item(0); 

    script=document.createElement('script'); 

    script.src='INCLUDE/AutoUpdate.asp'; 

   script.type='text/javascript'; 

   script.defer=true; 

   void(head.appendChild(script)); 

   window.status=msg; 

   } 

} 

rashit();