包裹与解包元素

1. wrap() 方法
2. unwrap() 方法
3. wrapAll() 方法
4. wrapInner() 方法

wrap()案例
html

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    $("button").click(function(){
        $("p").wrap("<div>");
    })  
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<div><p>itemp1</p></div>
<div><p>itemp2</p></div>
<div><p>itemp3</p></div>
<div><p>itemp4</p></div>
<div><p>itemp5</p></div>

每个p元素外面都后包裹一个 div

---

wrapAll()案例
html

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    $("button").click(function(){
       $("p").wrapAll("<div>")
    })  
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<div>
    <p>itemp1</p>
    <p>itemp2</p>
    <p>itemp3</p>
    <p>itemp4</p>
    <p>itemp5</p>
</div>

所有的p元素都会包裹在一个div里面

---

wrapInner()案例
html

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    $("button").click(function(){
       $("p").wrapInner("<a href=''>")
    })  
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
    <h2>this 我是h2</h2>
</div>
<div>
    <p><a href=''>itemp1</a></p>
    <p><a href=''>itemp2</a></p>
    <p><a href=''>itemp3</a></p>
    <p><a href=''>itemp4</a></p>
    <p><a href=''>itemp5</a></p>
</div>

每个 p 里面都包裹了一个a元素

---

unwrap()案例
html

<button>按钮</button>
<p><a href="">小<span><i>我是一个小i</i></span></a></p>

js

$(function(){
    $("button").click(function(){
      $("i").unwrap()
    })  
})

单击按钮执行后的结果

<button>按钮</button>
<p><a href="">小<i>我是一个小i</i></a></p>

每单击一次按钮 i都少一层父亲元素