一般動態創建元素可以通過兩種方式
1、Dom HTml
代碼 代碼如下:
var select = document.createElement("select");
select.options[0] = new Option("加載項1", "value1");
select.options[1] = new Option("加載項2", "value2");
select.size = "2";
testDiv.appendChild(select);
});
通過document的createElement方法創建，然後通過appendChild方法添加到指定的對象中即可
2、JQuery函數創建
$("<div style=\"border:solid 1px #FF0000\">動態創建的div</div>")
通過append，appendto，prepend，prependto等方法添加到指定的對象中，具體可以查看
http://www.jb51.net/article/35845.htm
3、頁面加載的時候最好在頁面加載完後執行創建
可以使用window.onload,但是在添加新的元素, 但是不幸的是浏覽器執行window.onload函數不僅僅是在構建完DOM樹之後, 也是在所有圖像和其他外部資源完整的加載並且在浏覽器窗口顯示完畢之後. 所以如果某個圖片或者其他資源加載很長時間, 訪問者就會看到一個不完整的頁面, 甚至在圖片加載之前就執行了需要依賴動態添加的元素的腳本而導致腳本錯誤.
解決辦法就是等DOM被解析後, 在圖像和外部資源加載之前執行我們的函數.在jQuery中讓這一實現變得可行
代碼 代碼如下:
$(document).ready(
function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用動態創建的$(document).ready(function)方法</div>"; }
);
或者使用簡便語法:
代碼 代碼如下:
//jQuery 使用$(function)方法
$(
function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; }
);
使用$()將我們的函數包裝起來即可. 而且可以在一個頁面綁定多個函數, 如果使用傳統的window.onload則只能調用一個函數.
所以請大家將修改DOM的函數使用此方法調用. 另外還要注意document.createElement和innerHTML的區別. 如果可以請盡量使用document.createElement和$("<div/>")的形式創建對象.