Wrap Method In Jquery 2 -Tutorial Savvy

Jquery version 2 provides a new group of method called wrap.

The four different methods of wrap:-

wrap() : wrapped a selected node with given element.

wrapAll() : wrap all selected nose with given element.

wrapInner() : wrap the inner selected node with given element.

unwrap() : removed the parent of the selected element.

To know more about wrap check the below link:-

http://api.jquery.com/wrap/

In this demo ,”We will demonstrate all the above 4 method“.

Below code shows the demonstrate all these method.The top DIV block is showing without wrap method.The second DIV block with wrap method applied.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery 2.0 wrap() method demo</title>
    <style>
        div{
            width: 400px;
        }
        #myName{
            font-size: 20px;
            height: 40px;
        }
        .border-wrapper{
            border: 1px solid green;
        }
        .red-text{
            color: red;
        }
        .blue-text{
            color: blue;
        }
        .background-yellow{
            background: yellow;
        }
     </style>
</head>
<body>
    <h3>ORIGINAL</h3>
    <div class="original">
        <div class="myName">Sandeep Kumar Patel</div>
        <div class="myEmail attribute">Sandeeppateltech@gmail.com</div>
        <div class="myLocation attribute">Bangalore</div>
        <div class="myOccupation">Web Developer</div>
        <div class="background-yellow">
            <a class="my-blog">www.tutorialsavvy.com</a>
        </div>
    </div>
    <br/> <br/> <br/>
    <h3>WITH WRAP METHOD DEMO</h3>
    <div class="with-wrap-methods">
        <div class="myName">Sandeep Kumar Patel</div>
        <div class="myEmail attribute">Sandeeppateltech@gmail.com</div>
        <div class="myLocation attribute">Bangalore</div>
        <div class="myOccupation">Web Developer</div>
        <div class="background-yellow">
            <a class="my-blog">www.tutorialsavvy.com</a>
        </div>
    </div>
<script src="jquery-2.0.0.min.js"></script>
<script>
    $(document).ready(function(){
        $(".with-wrap-methods .myName").wrap("<div class='border-wrapper'></div>")
        $(".with-wrap-methods div.attribute").wrapAll("<div class='red-text'></div>");
        $(".with-wrap-methods .myOccupation").wrapInner("<b class='blue-text'></b>");
        $(".with-wrap-methods .my-blog").unwrap();
    })
</script>
</body>
</html>