标签：
以下的内容都用于在打指定节点内添加新内容
1) append(content):在jQuery对象包含的所有DOM节点内的尾部插入content所代表内容。
2) append(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点，在每个节点的尾部依次插入function(index,html)函数的返回值。
3) appendTo(selector):将当前jQuery对象包含的DOM元素添加到selecctor匹配的所有DOM的内部的尾部。
4) prepend(content):在jQuery对象包含的所有DOM节点内的顶部插入content所代表的内容，其中content既可以是HTML字符串，也可以是DOM元素，还可以是jQuery对象。
5) prepend(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点，在每个节点的顶部依次插入function(index,html)函数的返回值。
6) prependTo(selector):将当前jQuery对象包含DOM元素添加到selector匹配的所的DOM有内部的顶端。
下面是程序示范了这些方法的功能。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="OwenWilliam" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 添加HTML节点 </title>
</head>
<body>
<div id="test1"></div>
<div id="test2" style="border:1px solid black;">id为test2的元素</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 直接将一段HTML字符串添加到id为test1的元素的内部的尾端
$("#test1").append("<b>XML</b>");
// 创建一个<span.../>元素
var span = document.createElement("span");
span.innerHTML = "Java"
// 将一个DOM元素添加到id为test1的元素的内部的顶端
$("#test1").prepend(span);
// 将id为test1的元素添加到id为test2的元素内部的尾端
$("#test1").appendTo("#test2");
</script>
</body>
</html>
结果：
如果使用append(function(index,html))、prepend(function(index,html))则可以为不同元素添加不同的内容。如下：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="OwenWilliam" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 添加HTML节点 </title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 定义一个数组
var books = [
{name: "Java" , price:109},
{name: "Java EE" , price:89},
{name: "Android" , price:89}]
// 使用函数为不同div元素动态添加不同的内容
$("body>div").append(function(i)
{
// i代表jQuery对象中正在迭代处理的元素的索引，因此为0、1、2...
return "<b>书名是《" + books[i].name
+ "》,价格是:" + books[i].price;
})
</script>
</body>
</html>
以下的方法用于在目标节点的前面添加新节点
1) after(content):在该jQuery对象包含的所有DOM节点之后添加content对应的内容。
2) after(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点，在每个节点的后面依次添加function(index)函数的返回值。
3) before(content):在该节点jQuery对象包含的所有DOM节点之前添加content对应的内容。
4) before(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点，在每个节点的前面依次添加function(index)函数的返回值。
5) insertAfter(selector):将当前jQuery对象包含的所有DOM节点插入到selector匹配的所有节点之前。
如下程序示范了以上几个插入方法。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="OwenWilliam" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 插入HTML节点 </title>
</head>
<body>
<div id="test1" style="border:1px dotted black;">id为test1的元素</div><br />
<div id="test2" style="border:1px solid black;">id为test2的元素</div>
<hr />
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 直接将一段HTML字符串插入到id为test1的元素的的前面
$("#test1").before("<b>Ajax</b>");
// 直接将一段HTML字符串插入到id为test1的元素的的后面
$("#test1").after("<b>XML</b>");
// 将id为test2的元素插入hr元素之后
$("#test2").insertAfter("hr");
// 使用函数在不同节点前添加不同内容
$("body>div").before(function(i)
{
return "<div style='font-size:14pt'>" + i + "</div>";
});
</script>
</body>
</html>
结果：
下面是方法用于替换节点DOM节点
1) replaceWith(newContent):将当前jQuery对象包含的所有DOM对象替换成newContent.
2) replaceWith(function(index)):使用function(index)函数迭代处理jQuery所包含的每个节点，依次使用function(index)函数的返回值来替换jQuery对象包含的每个节点。
3) replaceAll(selector):将当前jQuery对象包含的所有DOM对象替换成selectot匹配的元素。
下面是方法用于删除指定DOM节点
1) empty():删除当前jQuery对象包含的所有DOM节点。
2) remove([selector]):删除当前jQuery对象包含的所有DOM节点。
3) detach(selector):该方法的功能与remove([selector])方法相似，区别只在于detach()方法会保留被删除元素上关联的jQuery数据，当需要在后面某个时刻重新插入该被删除元素时，则该方法会比较有用。
clone([withDataAndEvents]):复制当前jQuery对象包含的所有DOM元素并且选中这些复制出来的副本。当需要把DOM文档中元素的副本添加到其他位置时，这个函数非常有用。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content=" OwenWilliam" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 删除和复制HTML节点 </title>
</head>
<body>
<div><span id="test1">id为test1的元素</span>Java</div>
<span id="test2">id为test2的元素</span>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 将div元素内容全部清空
$("div").empty()
// 重新添加字符串
.append("重新添加");
// 删除所有id为test2的span元素
$("span").remove("#test2");
// 取得页面中div元素，并复制该元素
$("div").clone()
// 添加背景色
.css("background-color" , "#cdcdcd")
// 添加到body元素尾部
.appendTo("body");
</script>
</body>
</html>
标签：
原文地址：http://blog.csdn.net/owen_william/article/details/51339909
