jQuery及javascript DOM创建节点(三)
DOM(Document Object Model)文档对象模型，DOM是一种与浏览器、平台和语言无关的接口，使用该接口可以访问页面其他的标准组件。
DOM Core统一了访问网页文档的方法，并为不同类型的节点对象提供了统一的操作方法和属性。javascript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等都是DOM Core模块的组成部分。
getElementById()：利用标记的id属性值访问标记元素。
getElementsByTagName()：利用标记的名称访问所有同名标记元素。
getAttribute()：获取指定元素的属性值。
setAttribute()：为指定元素的属性设置属性值。
1、创建元素
jQuery实现：
jQuery工厂函数$()创建一个h1对象，格式如下: $(html)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>jQuery创建元素</title>
5 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(function () {
8 // $("body").append("<h1></h1>");
9 var $h1 = $("<h1></h1>");
10 $("body").append($h1);
11 });
12 </script>
13 </head>
14 <body>
15 </body>
16 </html>
javascript实现：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>JavaScript创建元素</title>
5 <script type="text/javascript">
6 window.onload = function () {
7 var h1 = document.createElement("h1");
8 document.body.appendChild(h1);
9 }
10 </script>
11 </head>
12 <body>
13 </body>
14 </html>
2、创建文本
jQuery实现：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>jQuery创建文本</title>
5 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(function () {
8 var $h1 = $("<h1>DOM文档对象模型</h1>");
9 $("body").append($h1);
10 });
11 </script>
12 </head>
13 <body>
14 </body>
15 </html>
javascript实现：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>JavaScript创建文本</title>
5 <script type="text/javascript">
6 window.onload = function () {
7 var h1 = document.createElement("h1");
8 var txt = document.createTextNode("DOM文档对象模型");
9 h1.appendChild(txt);
10 document.body.appendChild(h1);
11 }
12 </script>
13 </head>
14 <body>
15 </body>
16 </html>
3、创建属性
jQuery实现：
<!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 runat="server">
<title>jQuery创建文本</title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var $h1 = $("<h1 id='title' class='red'>DOM文档对象模型</h1>");
$("body").append($h1);
});
</script>
</head>
<body>
</body>
</html>
javascript实现：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4 <title>JavaScript创建文本</title>
5 <script type="text/javascript">
6 window.onload = function () {
7 var h1 = document.createElement("h1");
8 var txt = document.createTextNode("DOM文档对象模型");
9 h1.appendChild(txt);
10 h1.setAttribute("id", "title");
11 h1.setAttribute("class", "red");
12 document.body.appendChild(h1);
13 }
14 </script>
15 </head>
16 <body>
17 </body>
18 </html>