1.创建元素节点
①创建jQuery对象$(html)
原理:根据传入字符串html创建DOM对象然后封装此DOM对象为 jQuery对象并返回
②插入jQuery对象
使用相应jQuery对象的append方法插入。
③注意
动态创建的新元素不会被自动加入文档,需要使用其他方法将其插入。
创建单个元素时,要注意闭合标签和使用标准的XHTML格式。如
$(“<p/>”)或$(“<p></p>”),而不是$(“<p>”)或大写的$(“/P”)。
2.创建文本节点
①创建jQuery对象$(html) html中既包括元素结点也包括文本结点。
②插入jQuery对象
使用相应jQuery对象的append方法插入。
③注意
与创建元素节点几乎相同,$(html)中的html更多复杂了。
其实,html是可以非常复杂的。
3.创建属性节点
①创建jQuery对象$(html) html中既包括元素结点也包括属性结点,只是多title属性
②插入jQuery对象
使用相应jQuery对象的append方法插入。
③注意
与创建文本节点几乎相同,$(html)中的html更多复杂了。
其实,html是可以非常复杂的。
4.实例
<html>
<head>
<title>jQuery中的DOM操作.创建结点</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function(){
//var $elementNode=$("<li></li>");//创建元素结点
//$("ul").append($elementNode);
//var $textNode=$("<li>Strawberry</li>");
//$("ul").append($textNode);
//var $complexNode=$("<li><strong>中国梦</strong><a href='http://www.gov.cn' title='中国政府网站'>点击此查看</a></li>");
//$("ul").append($complexNode);
var $attrNode=$("<li title='A kind of wonderful fruit'>Strawberry</li>");
$("ul").append($attrNode);
});
</script>
</head>
<body>
<p title="Choose your favorite fruit.">What's your favorite fruit?</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Pineapple</li>
</ul>
</body>
</html>