6.2 追加到appendTo(content)方法

• 引數：content： 用於被追加的內容選擇器，String型別。
• 返回值： 返回當前的jQuery包裝物件。
• 例項：

$("<div>****</div>").appendTo('body');

prependTo(content)方法，跟appendTo(content)的使用方法一致，一個是追加到最後，一個是追加到最前。

6.3 元素之後插入節點after(content|fn)方法

• 引數
  • content：插入到每個目標後的內容，型別可以：String，DOM，jQuery
  • fn(index,html)：函式必須返回一個html字串。
• 返回值： jQuery包裝物件
• 例項

// 字串
$('div').after('<p>1234</p>');
// jQuery物件
$("p").after($("#msg"));
// dom物件
$("p").after($("#msg")[0]);

// 傳入回撥函式
$("div").after(function(index, html) {
  return '<p>' + index  + '</p>'
})

before(content|fn) 方法正好是after(content|fn)相反的方法，用法一致。

6.4 插入某個元素之後insertAfter(content)方法

引數： content：插入到每個目標後的內容，型別可以：String，DOM，jQuery。

把所有匹配的元素插入到另一個、指定的元素元素集合的後面。實際上，使用這個方法是顛倒了常規的$(A).after(B)的操作，即不是把B插到A後面，而是把A插到B後面。

$("p").insertAfter("#foo");

insertBefore(content)跟此方法相反。

6.5 包裹節點wrap(html|element|fn)方法

• 概述：

把所有匹配的元素用其他元素的結構化標記包裹起來。
這種包裝對於在文件中插入額外的結構化標記最有用，而且它不會破壞原始文件的語義品質。這個函式的原理是檢查提供的第一個元素（它是由所提供的HTML標記程式碼動態生成的），並在它的程式碼結構中找到最上層的祖先元素－－這個祖先元素就是包裹元素。當HTML標記程式碼中的元素包含文字時無法使用這個函式。因此，如果要新增文字應該在包裹完成之後再行新增。

• 引數:
  • html， String型別，HTML標記程式碼字串，用於動態生成元素幷包裹目標元素
  • element， Element型別，用於包裝目標元素的DOM元素。
  • fn: 生成包裹結構的一個函式,返回包裹結構html
• 返回值:jQuery包裝物件
• 例項

<script>
// 把所有的段落用一個新建立的div包裹起來
$("p").wrap("<div class='wrap'></div>");
// 用ID是"content"的div將每一個段落包裹起來
$("p").wrap(document.getElementById('content'));
// 用原先div的內容作為新div的class，並將每一個元素包裹起來
</script>

 <!-- HTML 程式碼: -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<script>
// jQuery 程式碼:
$('.inner').wrap(function() {
  return '<div class=" + $(this).text() + " />';
});
</script>

<!-- // 結果: -->
<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

6.6 去掉父節點包裹unwrap()方法

這個方法將移出元素的父元素。這能快速取消 .wrap()方法的效果。匹配的元素（以及他們的同輩元素）會在DOM結構上替換他們的父元素。

<!-- HTML 程式碼: -->
<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>
<script>
  // jQuery 程式碼:
  $("p").unwrap()
</script>
<!-- 結果: -->
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

6.7 集合包裝wrapAll(html|ele)方法

• 概述

將所有匹配的元素用單個元素包裹起來。這於 .wrap()是不同的，.wrap()為每一個匹配的元素都包裹一次。這種包裝對於在文件中插入額外的結構化標記最有用，而且它不會破壞原始文件的語義品質。這個函式的原理是檢查提供的第一個元素並在它的程式碼結構中找到最上層的祖先元素－－這個祖先元素就是包裝元素。

• 引數

  • html， String型別，HTML標記程式碼字串，用於動態生成元素幷包裝目標元素
  • elem， Element型別，用於包裝目標元素的DOM元素

• 示例

$("p").wrapAll("<div></div>");
// 用一個生成的div將所有段落包裹起來
$("p").wrapAll(document.createElement("div"));

6.8 包裹內部子元素wrapInner(htm|element|fnl)方法

• 概述

將每一個匹配的元素的子內容(包括文字節點)用一個HTML結構包裹起來
這個函式的原理是檢查提供的第一個元素（它是由所提供的HTML標記程式碼動態生成的），並在它的程式碼結構中找到最上層的祖先元素－－這個祖先元素就是包裝元素。

• 引數

  • html， String型別，HTML標記程式碼字串，用於動態生成元素幷包裝目標元素
  • element，Element型別，用於包裝目標元素的DOM元素
  • fn，Function型別，生成包裹結構的一個函式

• 示例

// 把所有段落內的每個子內容加粗
$("p").wrapInner("<b></b>");
// 把所有段落內的每個子內容加粗
$("p").wrapInner(document.createElement("b"));

<!-- 用原先div的內容作為新div的class，並將每一個元素包裹起來 -->
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<script>
$('.inner').wrapInner(function() {
  return '<div class=" + $(this).text() + " />';
});
</script>

<!-- 結果: -->
<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

6.9 替換階段

• 方法：replaceAll(selector),用匹配的元素替換掉所有 selector匹配到的元素。

• 方法：replaceWith(content),用於將匹配元素替換掉的內容。可以是String\DOM\jQuery

// 替換掉所有的p,以下兩種方法都可以
$("p").replaceWith("<b>Paragraph. </b>");
$("<b>Paragraph. </b>").replaceAll("p");

6.10 清空子元素

empty()方法，刪除匹配的元素集合中所有的子節點

$("p").empty();

6.11 刪除節點

remove()方法從DOM中刪除所有匹配的元素。

// 刪除所有的p標籤
$("p").remove();

6.12 複製節點

clone([Even[,deepEven]])方法可以對節點進行克隆。

• Even:一個布林值（true 或者 false）指示事件處理函式是否會被複制。
• deepEven:一個布林值，指示是否對事件處理程式和克隆的元素的所有子元素的資料應該被複制。

$("b").clone().prependTo("p");