创建节点:
使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。
注意:
动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用
$(“<p>”) 或 $(“</P>”)
创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
练习:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ddd</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.10.2.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<!--引入jquery的js库-->
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/>
<input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/>
<input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/>
<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素" id="b4"/>
<!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<div id="one">
id为one div
</div>
<ul id="city">
<li id="bj" name="beijing">北京</li>
</ul>
</body>
<script language="JavaScript">
//在city下增加<li id="tj" name="tianjin">天津</li>节点
//创建<li></li>
//设置属性<li id="tj" name="tianjin"></li>
//设置文本节点<li id="tj" name="tianjin">天津</li>
//追加<li id="tj" name="tianjin">天津</li>节点到<ul id="city">下
</script>
</html>
答案:
<script language="JavaScript">
//在city下增加<li id="tj" name="tianjin">天津</li>节点
//创建<li></li>
$li = $("<li/>");
//设置属性<li id="tj" name="tianjin"></li>
$li.attr("id","tj");
$li.attr("name","tianjin");
//设置文本节点<li id="tj" name="tianjin">天津</li>
$li.text("天津1");
//追加<li id="tj" name="tianjin">天津</li>节点到<ul id="city">下
$("#city").append($li);
</script>