十三、动态创建元素
使用javascript创建对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery - 创建DOM模型</title>
<script src="../Static/common/js/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 页面内容部分 -->
<div id="divMsg"></div>
<div id="divHolder"></div>
<!-- 尾部脚本块 -->
<script type="text/javascript">
var thisPage = {
initialize: function() {//加载时执行
this.initializeDom();
this.initializeEvent();
this.createDom1();
this.createDom2();
//this.createDom3();
},
initializeDom: function() {//初始化DOM
this.holder = document.getElementById("divHolder");
this.divMsg = document.getElementById("divMsg");
},
initializeEvent: function() {//事件绑定
},
createDom1: function() {
var startDate = new Date();
var builder = new Array();
for (var i = 0; i < 100; i++) {
builder.push("<div style='width:100px; height:20px;background-color:#eee'>test</div>");
};
this.holder.innerHTML = builder.join("");
this.divMsg.innerHTML += "使用innerHTML耗时：" + (new Date() - startDate);
},
createDom2: function() {
var startDate = new Date();
for (var i = 0; i < 100; i++) {
var oDiv = document.createElement("div");
var oText = document.createTextNode("text");
oDiv.appendChild(oText);
this.holder.appendChild(oDiv);
oDiv.style.width = "100px";
oDiv.style.height = "20px";
oDiv.style.backgroundColor = "#eee";
};
this.divMsg.innerHTML += "<br/>使用createElement耗时：" + (new Date() - startDate);
},
createDom3: function() {
var startDate = new Date();
jQuery("<span/>").attr("id", "mySpan");
jQuery("<span style='width:100px; height:20px;background-color:#eee'>test</span>").appendTo(this.holder);
},
createDom4: function() {
jQuery("<span>test</span><span>test</span><span>test</span><span>test</span>").appendTo(this.holder);
}
}
$(thisPage.initialize());
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery - 创建DOM模型</title>
<script src="../Static/common/js/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 页面内容部分 -->
<div id="divMsg"></div>
<div id="divHolder"></div>
<!-- 尾部脚本块 -->
<script type="text/javascript">
var thisPage = {
initialize: function() {//加载时执行
this.initializeDom();
this.initializeEvent();
this.createDom1();
this.createDom2();
//this.createDom3();
},
initializeDom: function() {//初始化DOM
this.holder = document.getElementById("divHolder");
this.divMsg = document.getElementById("divMsg");
},
initializeEvent: function() {//事件绑定
},
createDom1: function() {
var startDate = new Date();
var builder = new Array();
for (var i = 0; i < 100; i++) {
builder.push("<div style='width:100px; height:20px;background-color:#eee'>test</div>");
};
this.holder.innerHTML = builder.join("");
this.divMsg.innerHTML += "使用innerHTML耗时：" + (new Date() - startDate);
},
createDom2: function() {
var startDate = new Date();
for (var i = 0; i < 100; i++) {
var oDiv = document.createElement("div");
var oText = document.createTextNode("text");
oDiv.appendChild(oText);
this.holder.appendChild(oDiv);
oDiv.style.width = "100px";
oDiv.style.height = "20px";
oDiv.style.backgroundColor = "#eee";
};
this.divMsg.innerHTML += "<br/>使用createElement耗时：" + (new Date() - startDate);
},
createDom3: function() {
var startDate = new Date();
jQuery("<span/>").attr("id", "mySpan");
jQuery("<span style='width:100px; height:20px;background-color:#eee'>test</span>").appendTo(this.holder);
},
createDom4: function() {
jQuery("<span>test</span><span>test</span><span>test</span><span>test</span>").appendTo(this.holder);
}
}
$(thisPage.initialize());
</script>
</body>
</html>
使用jQuery创建对象
在jQuery创建对象，需要使用jQuery核心函数。
|
名称 |
类型 |
说明 |
|
jQuery(html,ownerDocument) |
Function |
根据提供的原始HTML，动态创建DOM元素。最简单的不包含属性的元素，比如<div>由documen.createElement创建，其他格式的字符串将使用innerHtml创建。不能创建html head title body等无法放在div中的元素。注意正确的格式。如<span>要写成<span/> |
|
返回值 |
jQuery |
新创建元素的引用，并以jQuery对象的形式返回 |
|
Html参数 |
String |
要创建的html字符串 |
|
ownerDocument |
documnet (可选) |
创建DOM元素所在的文档 |
jQuery(html,ownerDocument)函数用来创建DOM元素，并且以jQuery对象的形式返回：jQuery("<span/>").attr("id","mySpan");
所以可以使用链式操作来操作DOM对象的属性和样式。
即使用innerHtml的方式创建元素，在内部也会首先使用document.createElement创建一个div元素，然后调用div的innerHtml方法。
创建对象常见错误
避免在DOM未加载完就改变DOM结构。
