1、外部插入
A.append(B) 将B插入到A的外部前面（之后的串联操作，操作A）
<A> .... <B></B> <A>A.prepend(B) 将B插入到A的外部后面
<A> <B></B> .... <A>A.appendTo(B) 将A插入到B的外部前面 （之后的串联操作，操作A）
A.prependTo(B) 将A插入到B的外部后面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>03_外部插入节点.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul> <ul id="love"> <li id="fk" name="fankong">反恐</li> <li id="xj" name="xingji">星际</li> </ul> <div id="foo1">Hello1</div> </body><script type="text/javascript"> //将 tj 插入 到 love 外部 前 或后 var $tj = $("#tj"); var $love = $("#love"); //后// $love.append($tj);// $tj.appendTo($love); //前// $love.prepend($tj); $tj.prependTo($love); </script> </html>2、内部插入
A.after(B) , 将B插入到A前面（同级）
<A></A> <B></B>A.before(B) ，将B插入到A后面
<B></B> <A></A>A.insertAfter(B) , 将A插入到B前面（同级）
<B></B> <A></A>A.insertBefore(B) 将A插入到B后面
<A></A> <B></B><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>04_内部插入节点.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul> <p id="p3">I would like to say: p3</p> <p id="p2">I would like to say: p2</p> <p id="p1">I would like to say: p1</p> </body><script type="text/javascript"> // 将 city 插入 到 p2 前或后 var $city = $("#city"); var $p2 = $("#p2"); // 后// $p2.after($city);// $city.insertAfter($p2); //前// $p2.before($city); $city.insertBefore($p2); </script> </html>3、删除
empty() 清空标签体
remove() 删除以后对象。如果之后再应用，元素自身保留，绑定事件或 绑定数据 都会被移除
detach() 删除以后对象。如果之后再应用，元素自身保留，绑定事件或 绑定数据 都保留
l 绑定数据
data(name)取得
data(name,value)设置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>05_删除节点.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京<p>海淀区</p></li> <li id="tj" name="tianjin">天津<p>河西区</p></li> <li id="cq" name="chongqing">重庆</li> </ul> <p class="hello">Hello</p> how are <p>you?</p> </body><script type="text/javascript"> // 将city移除，再追加body前面 //#1 绑定事件 $("#city").click(function(){ alert("O(∩_∩)O~"); }); //#2 绑定数据 $("#city").data("itheima","就是屌"); //1 移除 var $city = $("#city").remove(); //移除绑定的事件、移除绑定的数据// var $city = $("#city").detach(); //保留绑定的事件、保留绑定的数据 //2 追加 $("body").append($city); //#3取得绑定的数据 alert($("#city").data("itheima")); </script> </html>4、复制
clone() 克隆
even：批示事件处理函数是否会被复制。V1.5以上版本默认值是：false
<body> <button class="save">保留</button><br> <p>段落</p> </body> <script type="text/javascript"> $(".save").click(function(){ var $new = $(this).clone(true); $("body").append($new); }); </script>5、替换
A.replaceWith(B) ，应用A将B替换掉
A.replaceAll(B) ，应用B将A替换掉
<html> <p>段落</p> <p>段落</p> <p>段落</p> <button>保留</button> </html><script type="text/javascript">// $("p").replaceWith("<a>xxx</a> <br/>"); $("<a>xxx</a> <br/>").replaceAll("p");</script>6、包裹
A.wrap(B) ，应用B将每一个A进行包裹（多个B）
<B><A></A></B> <B><A></A></B>
A.wrapAll(B) ，应用B将所有A进行包裹（一个B）
<B> <A></A> <A></A> </B>A.wrapInner(B) ,应用B将每一个A的标签体包裹。
<A><B>。。。</B></A> <A><B>。。。</B></A>A.unwrap() ，将A的父元素删除，本人留着
<body> <strong title="jQuery">jQuery</strong> <strong title="jQuery">jQuery</strong> </body> <script type="text/javascript"> //每一个包// $("strong").wrap("<div></div>"); //一个包// $("strong").wrapAll("<div></div>"); //标签体 $("strong").wrapInner("<div></div>"); </script>