动态创建Dom节点
3.prepend，在元素的开始添加元素。 prependTo。after，在元素之后添加元素（添加兄弟）。before：在元素之前添加元素（添加兄弟）。
删除节点
动态创建Dom节点
1.使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到其他节点（元素）中：
var link = $("<a href='http://www.baidu.com'>百度</a>");
$("div:first").append(link);
$()创建的就是一个jQuery对象，可以完全进行操作
var link = $("<a href='http://www.baidu.com'>百度</a>");
link.text("百毒");
$("div:first").append(link);
。getElementByid的问题
2.append方法用来在元素的末尾追加元素
案例：动态生成网站列表
隐藏行号 复制代码 ？ 这是一段程序代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jqeury/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {//判断页面上是否有table
$("input[value=提交]").click(function () {if ($("#tb").length > 0) {return;
}
var json = [
{ "name": "cnblog", "site": "http://www.cnblogs.com" },{ "name": "cnbeat", "site": "http://www.cnbeat.com" },{ "name": "qiushibaike", "site": "http://www.qiushibaike.com" }];
var $tb = $("<table id='tb' border='1' width='300'></table>");$("#d1").append($tb);$.each(json, function () {var $tr = $("<tr></tr>");$tb.append($tr);
var $td = $("<td><a href='" + this.site + "'>" + this.name + "</td>");$tr.append($td);
$td = $("<td>" + this.site + "</td>");$tr.append($td);
})
})
})
</script>
</head>
<body>
<div id="d1">11111</div>
<input type="button" value="提交" />
</body>
</html>
练习：输入员工，员工个数不确定（动态生成文本框）
创建出的元素没有append到界面之前是无法用选择器找到的，就像new一个对象
3.prepend，在元素的开始添加元素。 prependTo。
after，在元素之后添加元素（添加兄弟）。
before：在元素之前添加元素（添加兄弟）。
删除节点
（1）remove()删除选择的节点
案例：清空ul中的项，代码见备注。$(“ul li.testitem”).remove(); 删除ul下li中有testitem样式的元素。自杀。把找到的都删掉。
remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。比如重新添加到其他节点下
var lis = $("#ulSite li").remove();
$("#ulSite2").append(lis); // $("#ulSite li").remove().appendTo($("#ulSite2"));
（2）empty()是将节点清空，清除节点的innerHTML，节点还在
案例：权限选择
隐藏行号 复制代码 ？ 这是一段程序代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Jqeury/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {$("input[value='>']").click(function() {var $link = $("#all option:selected").remove().removeAttr("selected");$("#sel").append($link);//一行的效果
//$("#all option:selected").remove().removeAttr("selected").appendTo($("#sel"));//可以去掉remove(),达到一样的效果
//$("#all option:selected").removeAttr("selected").appendTo($("#sel"));});
})
</script>
</head>
<body>
<select id="all" size="5" multiple="multiple">
<option>查找</option>
<option>编辑</option>
<option>删除</option>
<option>添加</option>
</select>
<input type="button" value=">" />
<input type="button" value="<" />
<input type="button" value=">>" />
<input type="button" value="<<" />
<select id="sel" size="5" multiple="multiple">
</select>
</body>
</html>
练习：选美女。被悬浮行高亮显示（背景是红色），点击美女将它放到另一个的美女列表。
隐藏行号 复制代码 ？ 这是一段程序代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>4minute - 选美女</title>
<style type="text/css">
li {width: 150px;
cursor: pointer;
}
</style>
<script src="Jqeury/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {$("#mv li").mousemove(function () {$(this).css("background-color", "yellow");}).mouseout(function () {$(this).css("background-color", "white");}).click(function () {//remove会移除对象的事件 [但不会移除样式]
$(this).remove().appendTo($("#cn")).css("background-color", "white");})
})
</script>
</head>
<body>
<ul id="mv">
<li>南智贤</li>
<li>金泫雅</li>
<li>权昭贤</li>
<li>许嘉允</li>
<li>全智允</li>
</ul>
<hr />
<ul id="cn">
</ul>
</body>
</html>