createElement 創(chuàng )建 HTML 元素,在 IE4.0 中只能創(chuàng )建 img、area、option,不過(guò)在 IE5 中,我們可以創(chuàng )建除 frame、iframe 以外的所有元素。
語(yǔ)法:
oElement = document.createElement(sTag)
sTag 要創(chuàng )建的元素名字,如:img、select、input,字符串類(lèi)型。
返回值:返回新元素的引用。
創(chuàng )建之后:
創(chuàng )建之后,我們可利用 insertBefore 或 appendChild 將元素顯示在頁(yè)面中?!?/p>
<div id="board"></div>
<script type="text/javascript">
<!--
var board = document.getElementById("board");
var e = document.createElement("select");
var obj = board.appendChild(e);
-->
</script>
上例中,創(chuàng )建一個(gè)下拉列表框,并追加到層 board 中。
創(chuàng )建元素后,可對元素進(jìn)行進(jìn)一步操作。
<div id="board"></div>
<script type="text/javascript">
<!--
var board = document.getElementById("board");
var e = document.createElement("select");
var obj = board.appendChild(e);
obj.options[0] = new Option("追加的項", "");
obj.size = 2;
//如下寫(xiě)法也是正確的:
//e.options[0] = new Option("追加的項", "");
//e.size = 2;
-->
</script>
創(chuàng )建 input
與 input 有關(guān)的元素有很多,比如:checkbox、radio、submit、reset...,因此創(chuàng )建 input 是個(gè)很特殊的用法。
創(chuàng )建不同的 input 正確的做法是:
<div id="board"></div>
<script type="text/javascript">
<!--
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "radio"; //緊接著(zhù)上一行寫(xiě)
var obj = board.appendChild(e);
obj.checked = true;
//如下寫(xiě)法也是正確的:
//e.checked = true;
-->
</script>
針對 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'' />"); 這在其它瀏覽器中是不行的,所以我們也不支持。
總結:
針對非 input 元素,各瀏覽器中,既可以把對元素屬性的改變寫(xiě)在顯示元素(insertBefore 或 appendChild)之前,也可以在其后。
針對 input 元素,為了兼容 IE,type 屬性寫(xiě)在顯示元素(insertBefore 或 appendChild)之前,其它屬性寫(xiě)在其后。
推薦:
除了 input 元素的 type 屬性寫(xiě)在顯示元素(insertBefore 或 appendChild)之前外,其它屬性都寫(xiě)在顯示元素之后。
改變屬性時(shí),對寫(xiě)在顯示元素(insertBefore 或 appendChild)之前的用 createElement 的返回值,對寫(xiě)在顯示元素之后的用 insertBefore 或 appendChild 的返回值。
文章出處:http://www.diybl.com/course/1_web/javascript/jsjs/200838/103449.html
聯(lián)系客服