16-包裹与解包元素

包裹与解包元素

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

wrap()案例
html

按钮

    
this 我是h2

itemp1
itemp2
itemp3
itemp4
itemp5

js

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

单击按钮执行后的结果

按钮

    
this 我是h2

itemp1
itemp2
itemp3
itemp4
itemp5

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

---

wrapAll()案例
html

按钮

    
this 我是h2

itemp1
itemp2
itemp3
itemp4
itemp5

js

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

单击按钮执行后的结果

按钮

    
this 我是h2


    
itemp1
    
itemp2
    
itemp3
    
itemp4
    
itemp5

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

---

wrapInner()案例
html

按钮

    
this 我是h2

itemp1
itemp2
itemp3
itemp4
itemp5

js

$(function(){
    $("button").click(function(){
       $("p").wrapInner("")
    })  
})

单击按钮执行后的结果

按钮

    
this 我是h2


    
itemp1
    
itemp2
    
itemp3
    
itemp4
    
itemp5

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

---

unwrap()案例
html

按钮
小我是一个小i

js

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

单击按钮执行后的结果

按钮
小我是一个小i

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