Jquery进行文本处理时，总共分为6种模式：内部插入、外部插入、包裹、替换、删除、复制

今天开始学习Jquery文本处理，在使用Jquery进行文本处理时，总共分为6种模式：内部插入、外部插入、包裹、替换、删除、复制。下面我们对它进行一一分析。
1.内部插入：对匹配的对象元素进行内容的追加（内部）
关键字：append  appendTo   prepend  prependTo
append-->在匹配对象元素(后面)追加指定内容
格式：$("element").append("content")
格式解释：$("element")为选中的匹配对象元素，content为我们所要追加的内容
举例：html代码 --> <p>Jquery文本处理学习</p>   Jquery代码：$("p").append("<span>大家好</span>")
结果：<p>Jquery文本处理学习<span>大家好</span></p>
Jquery代码解释：$("p").append("<span>大家好</span>") 查找p标签，并把<span>大家好</span>插入到p标签内的后面

appendTo -->把所有匹配的元素追加到另一个指定的元素元素集合中
格式：$("element").appendTo("content")
格式解释：$("element")为选中的匹配对象元素，content为被追加的内容
举例：html代码 --><div></div><p>我在学习Jquery</p>  Jquery代码：$("p").appendTo("div")
结果：<div><p>我在学习Jquery</p></div>
Jquery代码解释：$("p").appendTo("div") 查找p标签，并把p标签的内容插入到div标签中

prepend -->在匹配对象元素(前面)追加指定内容
说明：此关键字与append关键字一样，所不同的是，它将内容插入到匹配对象元素内的前面。

prependTo -->把所有匹配的元素前置到另一个、指定的元素集合中。
说明：此关键字与appendTo关键字一样，所不同的是，它将匹配到的元素前置到另一个元素集合中。

2.外部插入：对匹配的对象元素进行内容的追加（外部）
关键字：after before inserAfter inserBefore
after -->在每个匹配的元素之后插入内容.
格式：$("element").after("content")
格式解释：$("element")为选中的匹配对象元素，content为我们所要追加的内容
举例：html代码 --><div>大家好</div> Jquery代码：$("div").after("<p>我正在学习Jquery</p>")
结果：<div>大家好</div><p>我正在学习Jquery</p>
Jquery代码解释：把<p>我正在学习Jquery</p>插入到每个div标签的后面，比较简单。

before -->在每个匹配的元素之前插入内容
说明：此关键字与after关键字一样，所不同的是，它将内容插入到了匹配对象元素的前边

inserAfter -->把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
举例：html代码 --><div>abc</div><p>我在学习Jquery</p>  Jquery代码：$("p").inserAfter("div")
结果：<div>abc</div><p>我在学习Jquery</p>
Jquery代码解释：$("p").inserAfter("div") 查找p标签，并把p标签的内容插入到div标签后面

inserBefore -->把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
举例：html代码 --><div>abc</div><p>我在学习Jquery</p>  Jquery代码：$("p").inserBefore("div")
结果：<p>我在学习Jquery</p><div>abc</div>
Jquery代码解释：$("p").inserAfter("div") 查找p标签，并把p标签的内容插入到div标签前面

3.包裹
关键字：wrap unwrap wrapAll wrapInner
wrap -->把所有匹配的元素用其他元素的结构化标记包裹起来。
说明：wrap有两种参数 1：html代表结构化html代码 2:elem选择器
举例1： html代码：<div id="wrap">abc</div><p>我在学习Jquery</p> Jquery代码：$("p").wrap("<div id='wrap1'></div>")
结果：<div id="wrap">abc</div><div id='wrap1'><p>我在学习Jquery</p></div>
举例2：html代码:<div id="wrap">abc</div><p>我在学习Jquery</p> Jquery代码：$("p").wrap($("#wrap"))
结果：<div id="wrap">abc</div><div id="wrap">abc<p>我在学习Jquery</p></div>

unwrap -->移出元素的父元素
举例：html代码：<div id='wrap1'><p>我在学习Jquery</p></div> Jquery代码：$("p").unwrap()
结果：<p>我在学习Jquery</p>

wrapAll -->将所有匹配的元素用单个元素包裹起来
举例：html代码：<p>Hello</p><div id="warp"><p>我在学习Jquery</p></div>
       Jquery代码：$("p").wrapAll("<div class='wrap1'></div>")
结果：<div class="wrap1"><p>Hello</p><p>我在学习Jquery</p></div><div id="warp"></div>
举例2：html代码：<div class="warp">abc</div><p>Hello</p><div id="warp"><p>我在学习Jquery</p></div>
         Jquery代码：$("p").wrapAll($(".warp"))
结果：<div class="warp">abc</div><div class="warp">abc<p>Hello</p><p>我在学习Jquery</p></div><div id="warp"></div>

wrapInner -->将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
举例：html代码：<p>Hello</p><p>cruel</p><p>World</p> Jquery代码：$("p").wrapInner("<b></b>");
结果：<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>

4.替换
关键字：replaceWith replaceAll
replaceWith -->将所有匹配的元素替换成指定的HTML或DOM元素。
举例：<p>Hello</p><p>cruel</p><p>World</p> Juqery代码：$("p").replaceWith("<b>Paragraph. </b>");
结果：<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

replaceAll -->用匹配的元素替换掉所有 selector匹配到的元素。
举例：<p>Hello</p><p>cruel</p><p>World</p> Jquery代码：$("<b>Paragraph. </b>").replaceAll("p");
结果：<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

replaceWith与replaceAll比较：replaceWith是先找匹配对象，再设置值，replaceAll是先设置值，再找匹配对象

5.删除
关键字：empty remove detach
empty -->删除匹配的元素集合中所有的子节点。
举例：<p>Hello, <span>Person</span> <a href="#">and person</a></p> Jquery代码：$("p").empty();
结果：<p></p>

remove -->从DOM中删除所有匹配的元素。
举例：<p>Hello</p> how are <p>you</p> Jquery代码：$("p").remove();
结果：how are
说明：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

detach -->从DOM中删除所有匹配的元素。
举例：<p class="hello">Hello</p> how are <p>you</p> Jquery代码：$("p").detach(".hello");
结果：how are <p>you</p>
说明：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

6.复制
关键字：clone clone(true)
clone -->克隆匹配的DOM元素并且选中这些克隆的副本
举例：<b>Hello</b><p>, how are you</p>   Jquery代码：$("b").clone().prependTo("p");
结果：<b>Hello</b><p><b>Hello</b>, how are you</p>

clone(true) -->元素以及其所有的事件处理并且选中这些克隆的副本
举例：<button>Clone Me!</button>  Jquery代码：$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});
结果：<button>Clone Me!</button><button>Clone Me!</button>
说明：clone()方法是复制一个元素，不包含其所有事件，
          clone(true)方是复制一个元素及其所有事件