1.内部插入
| 方法名 | 方法的说明 |
| appendTo | 把创建的新元素加入某个元素里面的尾部 |
| append | 在某个元素的里面的尾部加入新元素 |
| prependTo | 和以上同，只是加入到内部的前面 |
| prepend | ------------------- |
append()向每个匹配的元素内部追加内容(标签有效)。
$(document).ready(function(){
$("p").append("<b>Hello</b>");});appendTo()把所有匹配的元素追加到另一个指定的元素集合中
把p段落追加到div中：
$(document).ready(function(){
$("p").appendTo("div");});prepend()向所有匹配元素内部的开始处插入内容：
$(document).ready(function(){
$("p").prepend("前置内容");});
prependTo()把所有匹配的元素前置到另一个、指定的元素元素集合中。 把p段落前置到div中：
$(document).ready(function(){
$("p").prependTo("div");});<body>
<p>我是p。</p>
<div>我是div</div></body>
2.外部插入
| 方法名 | 方法的说明 |
| after | 创建的新元素加入某个元素里面的后面 |
| before | 创建的新元素加入某个元素里面的前面 |
在段落之后插入：
$(document).ready(function(){ $("p").click(function(){ $("p").after("<b>插入元素后面</b>"); });});在段落之前插入：$(document).ready(function(){ $("p").click(function(){ $("p").before("<b>插入元素前面</b>"); });});将p元素插入div后面：$(document).ready(function(){ $("p").click(function(){ $("p").insertAfter("div"); });});将p元素插入div前面：$(document).ready(function(){ $("p").click(function(){ $("p").insertBefore("div"); });});<body>
<p>p</p><div>div</div></body>3.包裹
wrap()把所有匹配的元素用其他元素的结构化标记包裹起来。把所有的段落用一个新创建的div包裹起来: $("p").click(function(){ $("p").wrap("<div id='wrap'></div>"); });unwrap()这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果 $("p").click(function(){ $("p").unwrap(); });wrapAll()将所有匹配的元素用单个元素包裹起来wrapInner()将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来把所有段落内的每个子内容加粗: $("p").click(function(){ $("p").wrapInner("<b></b>"); });4.复制、替换、删除
| 方法名 | 方法的说明 |
| replaceWith | 老元素被替换成新元素 |
| replaceAll | 新元素替代老元素 |
| clone（boolean） | 复制（参数为true表可复制） |
| empty | 讲选中的元素清空 |
| remove | 移除某个元素 |
4.替换
replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素。把所有的段落标记替换成加粗的标记: $("p").click(function(){ $("p").replaceWith("<b>替换</b>"); });replaceAll()用匹配的元素替换掉所有 selector匹配到的元素 $("p").click(function(){ $("<b>替换</b>").replaceAll("p"); });5.删除empty()删除匹配的元素集合中所有的子节点。 $("p").click(function(){ $("p").empty(); });remove()从DOM中删除所有匹配的元素。 $("p").click(function(){ $("div").remove(); });删除class为dd的div： $("p").click(function(){ $("div").remove(".dd"); });detach()从DOM中删除所有匹配的元素。不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$("p").click(function(){ $("div").detach(".dd"); }); <body><p>p</p><p class="hello">pp</p><div>div</div><div class="dd">dd</div></body>6.复制
clone()克隆匹配的DOM元素并且选中这些克隆的副本复制b元素并插入到段落中前置： $("p").click(function(){ $("b").clone().prependTo("p"); });复制一个按钮，他可以复制自己，并且他的副本也有同样功能。(设置true才可以让副本也可以复制自己) $("button").click(function(){ $(this).clone(true).insertAfter(this); });<body>
<p>p</p><p class="hello">pp</p><div>div</div><div class="dd">dd</div><b>Hello</b><button>fuzhi</button></body>