您的位置：首页 > Web前端 > JQuery

jQuery及javascript DOM创建节点(三)

2012-03-13 13:46 253 查看

　　DOM(Document Object Model)文档对象模型，DOM是一种与浏览器、平台和语言无关的接口，使用该接口可以访问页面其他的标准组件。

　　DOM Core统一了访问网页文档的方法，并为不同类型的节点对象提供了统一的操作方法和属性。javascript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等都是DOM Core模块的组成部分。

　　getElementById()：利用标记的id属性值访问标记元素。

　　getElementsByTagName()：利用标记的名称访问所有同名标记元素。

　　getAttribute()：获取指定元素的属性值。

　　setAttribute()：为指定元素的属性设置属性值。

　　1、创建元素

　　jQuery实现：

　　jQuery工厂函数$()创建一个h1对象，格式如下: $(html)

<!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 () {
　　　　　　  // $("body").append("<h1></h1>");
　　　　　　  var $h1 = $("<h1></h1>");
$("body").append($h1);
});
　　 </script>
</head>
<body>
</body>
</html>

　　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 runat="server">
<title>JavaScript创建元素</title>
<script type="text/javascript">
window.onload = function () {
　　　　     var h1 = document.createElement("h1");
document.body.appendChild(h1);
}
　　 </script>
</head>
<body>
</body>
</html>

　　2、创建文本

　　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>DOM文档对象模型</h1>");
$("body").append($h1);
});
　　 </script>
</head>
<body>
</body>
</html>

　　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 runat="server">
<title>JavaScript创建文本</title>
<script type="text/javascript">
window.onload = function () {
　　　　 　　var h1 = document.createElement("h1");
　　　　　　 var txt = document.createTextNode("DOM文档对象模型");
h1.appendChild(txt);
document.body.appendChild(h1);
}
　　 </script>
</head>
<body>
</body>
</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实现：

<!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>JavaScript创建文本</title>
<script type="text/javascript">
window.onload = function () {
　　　　　　  var h1 = document.createElement("h1");
　　　　　　　var txt = document.createTextNode("DOM文档对象模型");
h1.appendChild(txt);
h1.setAttribute("id", "title");
h1.setAttribute("class", "red");
document.body.appendChild(h1);
}
　　 </script>
</head>
<body>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航