jQuery（五）——文档处理

八、JQuery中的DOM操作

1、内部最后面添加

• 　　　append：在div1的内部，最后追加一个图片（在A中添加b）

  $("#div1").append("<img src='../01-HTML基本标签/images/1.gif'/>"); 

• 　　　appendTo：把一个图片追加到div1的内部最后（将b添加到A中）

  　　　$("<img src='../01-HTML基本标签/images/2.gif'/>").appendTo("#div1"); 

　2、内部最前方插入

• 　　　prepend：

  　　　 $("#div1").prepend("<img src='../01-HTML基本标签/images/1.gif'/>"); 

• 　　　prependTo：

  　　　 $("<img src='../01-HTML基本标签/images/2.gif'/>").prependTo("#div1"); 

3、在div1的外部，后面插入节点

• 　　　after：

　　　 $("#div1").after("<p>这是一个p</p>"); 

• 　　　insertAfter：

　　　 $("<p>11111</p>").insertAfter("#div1");  

4、在div1的外部，前面插入节点

• 　　　before：

  　　　 $("#div1").before("<p>这是一个p</p>"); 

• 　　　insertBefore：

  　　　 $("<p>11111</p>").insertBefore("#div1");  

5、为每一个选中的节点，都套一层父节点。

• 　　　wrap：

  　　　 $("div").wrap("<section></section>");  

• 　　　wrapAll：

  　　　 $("div").wrapAll("<section></section>");

6、将选中的所有节点，包裹在同一个父节点中

• 　　　wrapAll：

　　　 $("p").wrapAll("<section></section>"); 　　// ×  

　　　 $("div~p").wrapAll("<section></section>");  　

7、删除选中节点的父节点

• 　　　unwrap：

  　　　 $("#div1 p").unwrap();  

8、将选中节点中的所有子元素，包裹在一个新的父节点中；

新的父节点依然是当前元素的唯一子节点

• 　　　wrapInner：

  　　　 $("#div1").wrapInner("<div></div>");  

9、将所有选中的节点，重新替换为新的节点

• 　　　replaceWith：

  　　　 $("div p").replaceWith("<span>1</span>");  

• 　　　replaceAll：

  　　　 $("<span>1</span>").replaceAll("div p");  

• 　　　只替换标签：　　　

  　　 　$("div p").wrapInner("<span></span>");
  　　 $("div p>span").unwrap();

  　

10、

empty：清空当前节点内容，但会保留当前节点标签

　　　 $("#div1").empty();  

remove：删除当前节点，以及当前节点的所有子节点，使用remove删除的节点，如果恢复以后，将不再保留节点所绑定的事件；

　　　 $("#div1").remove();  

detach：删除当前节点，以及当前节点的所有子节点，使用detach删除的节点，在节点恢复以后，可以恢复节点之前所绑定的事件。

　　　 $("#div1").detach();   

11、clone：克隆

　　　 $("#div1").clone(true).empty().insertBefore("button:eq(0)");