javascript動態建立 div注意細節

(1) 在頁面載入時改變了頁面的結構. 在ie6中如果網路變慢或者頁面內容太大就會出現"終止操作"的錯誤. 也就是說"永遠不要在頁面載入時改變頁面的dom模型".

(2) 使用修改html內容添加元素,  不符合dom標準. 在實際工作中也碰到過使用這種方法修改內容後,
某些瀏覽器中並不能立刻顯示添加的元素, 因為不同瀏覽器的顯示引擎是不同的. 但是如果我們使用dom的createelement建立對象,
在所有的瀏覽器中幾乎都可以. 但是在jquery中如果傳入的而是一個完整的html字串, 內部也是使用innerhtml.
所以也不是完全否定innerhtml函數的使用.

所以從現在開始請摒棄這種舊知識, 使用下面介紹的正確方法編程.

 
關於使用html dom建立元素本文不做詳細介紹, 下面舉一個簡單的例子:

第一種正確方式： //使用dom標準建立元素 var select = document.createelement("select");    select.options[0] = new option("附加元件1", "value1");    select.options[1] = new option("附加元件2", "value2");    select.size = "2";    var object = testdiv.appendchild(select);
通過使用 document.createelement 方法我們可以建立dom元素, 然後通過appendchild方法為添加到指定對象上.

第二種方式： 使用jquery

 

當html字串是沒有屬性的元素是, 內部使用document.createelement建立元素, 比如:

//jquery內部使用document.createelement建立元素:

$("").css教程("border","solid 1px #ff0000").html("動態建立的div").appendto(testdiv);
否則使用innerhtml方法建立元素:

//jquery內部使用innerhtml建立元素:

$("動態建立的div").appendto(testdiv)