Manipulation-DOM Insertion, Around

Posted on Edited on In Views: Disqus:

 

一、.unwrap()

移除指定外圍被包裹的元素。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>unwrap demo</title>
    <style>
        div {
            border: 2px solid blue;
        }

        p {
            background: yellow;
            margin: 4px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <button>wrap/unwrap</button>
    <div><p>Hello</p></div>
    <p>cruel</p>
    <div><p>World</p></div>

    <script>
        var pTags = $("p");
        $("button").click(function () {
            if (pTags.parent().is("div")) {
                pTags.unwrap();
            } else {
                pTags.wrap("<div></div>");
            }
        });
    </script>
</body>
</html>

注意，被指定刪除的元素不一定每次要出現。

 

二、.wrap()

對符合的集合其外圍包上一層指定的元素(父元素)。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        .new {
            border: 2px solid blue;
        }

        .inner {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <button>click</button>
    <div class="container">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
    </div>

    <script>
        $("button").click(function () {
            $(".inner").wrap("<div class='new'></div>");
        });
    </script>
</body>
</html>

 

三、.wrapAll()

對符合的集合其外圍與裡面皆附加上一層指定的元素(父元素與子元素)。

 

四、.wrapInner()

對符合的集合其裡面加上一層指定的元素(子元素)。