Today we will discuss about the jQuery two methods: wrap() and unwrap(). Both method are used to wrap and unwrap a particular element. Let's discuss them in details:
wrap():
wrap() method in jQuery is basically wrap a particular element around another element. Syntax:
$(selector).wrap(wrappingElement,function(index))
-selector: It is the element whom we will wrap.
- wrappingElement: This is the element around which we want to wrap the selector. This is a requires parameter.
- function(index): It is an optional parameter. It is the function which will return the wrapping element. index defines the element position.
Let's take an example to understand the wrap() method.
In above example, when we click on the button span element will be wrapped in the div element with background color as blue.
unwrap():
unwrap() method is just opposite of wrap() method. It will unwrapped a particular element. Using this method the parent element of an element is removed. Syntax:
$(selector).unwrap()
selector is the element whom we want to unwrap.
Let's take an example to understand this method.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("span").unwrap();
});
});
</script>
<style>
div {
background-color: blue;
width: 100%;
}
</style>
</head>
<body>
<div><span>Element to unwrap</span></div>
<button>Wrap the element</button>
</body>
</html>
In above example, when we will click on the it will unwrap the span element.
0 Comment(s)