在jQuery中，如果我們想要將某個節點用其他標簽包裹起來，共有3種方法：
wrap()方法表示將所選元素使用某個標簽包裹起來。
語法：
$(A).wrap(B)
說明：
$(A).wrap(B)表示將A元素使用B元素包裹起來。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("strong").wrap("<em></em>")
});
})
</script>
</head>
<body>
<ul>
<li><strong>HTML</strong></li>
<li><strong>CSS</strong></li>
<li><strong>JavaScript</strong></li>
<li><strong>jQuery</strong></li>
<li><strong>canvas</strong></li>
</ul>
<input id="btn" type="button" value="wrap包裹"/>
</body>
</html>
在浏覽器預覽效果如下：
當我們點擊“包裹”按鈕之後，預覽效果如下：
分析：
$("strong").wrap("<em></em>")表示將strong標簽使用em標簽包裹起來，因此點擊“包裹”按鈕之後，實際的HTML代碼如下：
<ul>
<li><em><strong>HTML</strong></em></li>
<li><em><strong>CSS</strong></em></li>
<li><em><strong>JavaScript</strong></em></li>
<li><em><strong>jQuery</strong></em></li>
<li><em><strong>canvas</strong></em></li>
</ul>
上一節我們學習的replaceWith()和replaceAll()這兩種方法的作用是等價的，只不過兩者的使用方法是“顛倒性”罷了。
但是在這裡，大家要注意了！wrapAll()跟wrap()這兩種方法的作用是不等價的。wrap()方法是將所有元素進行單獨的包裹，但是wrapAll()會將所有匹配的元素用一個元素來包裹！。
<p> 學習網</p> <p> 學習網</p> <p> 學習網</p>
對於上面這段代碼，如果使用$("p").wrap("<div></div>")，則會得到以下結果：
<div><p> 學習網</p><div> <div><p> 學習網</p><div> <div><p> 學習網</p><div>
如果使用$("p").wrapAll("<div></div>")，則得到以下結果：
<div>
<p> 學習網</p>
<p> 學習網</p>
<p> 學習網</p>
</div>
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("p").wrapAll('<div style="background-color:orange;"></div>');
});
})
</script>
</head>
<body>
<p> 學習網</p>
<p> 學習網</p>
<p> 學習網</p>
<input id="btn" type="button" value="wrapAll包裹" />
</body>
</html>
在浏覽器預覽效果如下：
當我們點擊“包裹”按鈕之後，預覽效果如下：
wrap()方法表示將所選元素使用某個標簽包裹起來，wrapInner()方法表示將所選元素“所有內部元素”使用某個標簽包裹起來。
語法：
$(A).wrapInner(B)
說明：
$(A).wrapInner(B)表示將A元素“所有內部子元素”使用B元素包裹起來（不包括A本身）。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("strong").wrapInner("<em></em>")
});
})
</script>
</head>
<body>
<ul>
<li><strong>HTML</strong></li>
<li><strong>CSS</strong></li>
<li><strong>JavaScript</strong></li>
<li><strong>jQuery</strong></li>
<li><strong>canvas</strong></li>
</ul>
<input id="btn" type="button" value="wrapInner包裹" />
</body>
</html>
在浏覽器預覽效果如下：
當我們點擊“包裹”按鈕之後，預覽效果如下：
分析：
雖然這個例子跟wrap()方法的例子效果一樣，但是HTML結構是不一樣的。
$("strong").wrapInner("<em></em>")表示將strong標簽“所有內部子元素”使用em標簽包裹起來，因此點擊“包裹”按鈕之後，實際的HTML代碼如下：
<ul>
<li><strong><em>HTML</em></strong></li>
<li><strong><em>CSS</em></strong></li>
<li><strong><em>JavaScript</em></strong></li>
<li><strong><em>jQuery</em></strong></li>
<li><strong><em>canvas</em></strong></li>
</ul>