                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础(二)—DOM篇

为什么多次使用wrapinner后，使用一次unwrap会直接还原，并且不可操作

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <style>
        .left div,
        .right div {
            width: 100px;
            padding: 5px;
            margin: 5px;
            float: left;
            border: 1px solid #ccc;
            background: #bbffaa;
        }

        .right div {
            background: yellow;
        }

        p {
            border: 1px solid red;
        }
    </style>
</head>

<body>
<h2>DOM包裹wrap()方法</h2>
<div class="left">
    <button class="aaron1">点击,通过wrap方法给p元素增加父容器div</button>
    <button class="aaron2">点击,通过unwrap方法给p元素删除父容器div</button>
    <button class="aaron3">点击,通过wrapAll方法给所有P元素增加父容器div</button>
    <button class="aaron4">点击,通过wrapInner方法给所有div元素增加内部父容器p</button>
</div>
<div class="right">
    <p>p元素</p>
    <p>p元素</p>
</div>
<script type="text/javascript">
    $(".aaron1").on('click',function () {
        $('p').wrap('<div></div>')
    })
    $(".aaron2").on('click',function () {
        $('p').unwrap('<div></div>')
    })
    $(".aaron3").on('click',function () {
        $('p').wrapAll('<div></div>')
    })
    $('.aaron4').on('click',function () {
        $('.right').wrapInner('<p></p>')
    })
</script>
</body>

</html>