代碼如下:
<script type="text/javascript">
document.getElementById("testDiv").innerHTML ="動態創建的div";
</script>
而且用的應該是還是樂此不疲，但是有多少人知道這是錯誤的做法!錯誤的原因:
(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)