JQuery包裝對象wrap、wrapAll、wrapInner、unwrap

jq怎么在標簽外面給父級標簽，怎么在div外面動態加標簽，怎么刪除標簽的父級元素，怎么把多個標簽抱在一個標簽里面，標簽里面再加一個標簽，請看JQuery包裝對象wrap、wrapAll、wrapInner、unwrap。

一、JQuery包裝對象wrap
有時候我們需要動態的操作，把一些標簽抱在一個div或者其他標簽里面。

比如說動態在下面的span外面加個標簽：

<span>CGLweb前端</span>
這時候咱們可以使用JQ包裝對象wrap。

代碼如下：

<span>CGLweb前端 cenggel.com</span>
<script type="text/javascript">
$('span').wrap('<div>');
</script>
輸出的代碼：

<div><span>CGLweb前端 cenggel.com</span></div>

二、JQuery包裝對象wrapAll（整體包裝）
第一個例子：

代碼如下：

<span>CGLweb前端 cenggel.com</span>
<span>CGLweb前端 cenggel.com</span>
<span>CGLweb前端 cenggel.com</span>
<script type="text/javascript">
$('span').wrapAll('<div>');
</script>
結果為：

<div>
<span>CGLweb前端 cenggel.com</span>
<span>CGLweb前端 cenggel.com</span>
<span>CGLweb前端 cenggel.com</span>
</div>

第二例子：如果代碼里面有其他的標簽，jq將會把這個標簽移除在外面：

代碼如下：

<span>CGLweb前端 cenggel.com</span>
<span>CGLweb前端 cenggel.com</span>
<p>CGLweb前端 cenggel.com</p>
<span>CGLweb前端 cenggel.com</span>
<script type="text/javascript">
$('span').wrapAll('<div>');
</script>
結果為：

<div>
<span>CGLweb前端 cenggel.com</span>
<span>CGLweb前端 cenggel.com</span>
<span>CGLweb前端 cenggel.com</span>
</div>
<p>CGLweb前端 cenggel.com</p>
所以使用的時候盡量注意一下這個。

三、JQuery包裝對象wrapInner（內包裝）

wrapInner會直接把作用標簽的內容放在新加的標簽里面。

代碼如下：

<div>CGLweb前端 cenggel.com</div>
<div>CGLweb前端 cenggel.com</div>
<div>CGLweb前端 cenggel.com</div>
<script type="text/javascript">
$('div').wrapInner('<em>');
</script>
結果為：

<div><em>CGLweb前端 cenggel.com</em></div>
<div><em>CGLweb前端 cenggel.com</em></div>
<div><em>CGLweb前端 cenggel.com</em></div>

四、JQuery包裝對象unwrap（刪除包裝）
把指定標簽的父級刪除，注意一下，如果標簽的父級是body的時候，這個方法將不會執行。

<div>
<p>CGLweb前端 cenggel.com</p>
<p>CGLweb前端 cenggel.com</p>
<p>CGLweb前端 cenggel.com</p>
</div>
<script type="text/javascript">
$('p').unwrap('<div>');
</script>

到此為止JQuery包裝對象wrap()、wrapAll()、wrapInner()、unwrap()，已經講解完畢。