在開發(fā)過程中,我們經(jīng)常要通過JS在DOM中加一些元素,例如,在用戶注冊時(shí)進(jìn)行異步判斷用戶是否存,而給出相應(yīng)的提示,則就要用到創(chuàng)建一個(gè)元素,將內(nèi)容的字體樣式設(shè)置為紅色,內(nèi)容為用戶名已經(jīng)存在諸如些類的應(yīng)用,在此我們著重介紹createElement()的使用方法和應(yīng)用,使用document.createElement()方法可以創(chuàng)建新元素。這個(gè)方法只接受一個(gè)參數(shù),即要?jiǎng)?chuàng)建元素的標(biāo)簽名。這個(gè)標(biāo)簽名在HTML文檔中不區(qū)分大小寫,而在XML(包括XHTML)文檔中,則是
區(qū)分大小寫的。例如,使用下面的代碼可以創(chuàng)建一個(gè)
元素:
var div=document. createElement("div");
在使用createElement()方法創(chuàng)建新元素的同時(shí),也為新元素設(shè)置了ownerDocuemnt屬性。此時(shí),還可以操作元素的特性,為它添加更多子節(jié)點(diǎn),以及執(zhí)行其他操作。來看下面的例子:
div.id="myNewDiv";
div.className="box";
在新元素上設(shè)置這些特性只是給它們賦予了相應(yīng)的信息。由于新元素尚未被添加到文檔樹中,因此設(shè)置這些特性不會(huì)影響瀏覽器的顯示。要把新元素添加到文檔樹,可以使用appendChild()、inser-
tBefore()或replaceChild()方法。下面的代碼會(huì)把新創(chuàng)建的元素添加到文檔的元素中:
document. body. appendChild( div);
一旦將元素添加到文檔樹中,瀏覽器就會(huì)立即呈現(xiàn)該元素。此后,對(duì)這個(gè)元素所作的任何修改都會(huì)實(shí)時(shí)反映在瀏覽器中。
在IE中可以以另一種方式使用createElement(),即為這個(gè)方法傳人完整的元素標(biāo)簽,也可以包含屬性,接下來由南昌網(wǎng)站制作公司百恒網(wǎng)絡(luò)開發(fā)工程師結(jié)合實(shí)例介紹創(chuàng)建完整的DIV標(biāo)簽,如下面的例子所示:
var div=document. createElement("
http://www.gimmickmag.com
")j
這種方式有助于避開在IE7及更早版本中動(dòng)態(tài)創(chuàng)建元素的某些問題;下面是已知的一些這類問題。
◎不能設(shè)置動(dòng)態(tài)創(chuàng)建的");
//創(chuàng)建input元素
var input=document. createElement("");
//創(chuàng)建button元素
var button=document.createElement("");
//創(chuàng)建單選按鈕
var radiol=document.createElement("");
var radio2=document. createElement("");
}
與使用createElement()的慣常方式一樣,這樣的用法也會(huì)返回一個(gè)DOM元素的引用??梢詫⑦@個(gè)引用添加到文檔中,也可以對(duì)其加以增強(qiáng)。但是,由于這樣的用法要求使用瀏覽器檢測,因此我們建議只在需要避開lE及更早版本中上述某個(gè)問題的情況下使用。其他瀏覽器都不支持這種用法。
本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http: //www.gimmickmag.com 如轉(zhuǎn)載請注明出處!