一、 前言
在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等.
二、 动态创建元素
1) 使用HTML DOM创建新元素
什么是 DOM?
通过 JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西,JavaScript需要通过某个入口对HTML文档中的所有元素进行访问。这个入口,连同对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);
2) 使用JQuery创建新元素
使用JQuery新增一个元素很简单:
<div>
<div id="divMsg">hello world!</div>
<asp:Button ID="btnAddDiv" runat="server" Text="向divMsg中新增一个div元素"/>
<script type="text/javascript">
$("#btnAddDiv").bind("click", function(event){$("<div>我是新增的div</div>").appendTo($("#divMsg")); event.preventDefault();});
</script>
</div>
其中:$("#btnAddDiv").bind("click", function(event){$("<div>我是新增的div</div>").appendTo($("#divMsg")); event.preventDefault();});也可写成如下:
$("#btnAddDiv").bind("click", function(event){$("<div/>").html(“我是新增的div”).appendTo($("#divMsg")); event.preventDefault();});