jQuery Basic Tutorial

jQuery Effects

The wrap() method will wrap each selected element with the specified HTML element.

Useunwrap()Method to remove the parent element of the selected element.

Wrapper element:

$.wrap(wrappingElement)

Wrap elements using a function:

$.wrap(function(index))

Wrap the DIV element around each <p> element:

Example

$("button").click(function(){
　　$("p").wrap("<div></div>");
});

This example uses document.createElement() to create a DIV element and wrap it around each <p> element:

Example

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

Wrap elements using a function:

Example

$("button").click(function(){
　　$("p").wrap(function(){
　　　　　　return　document.createElement("div");
　　});
});

Toggle between wrapping and unwrapping elements:

Example

$("#btn1").click(function(){
　　$("p").wrap("<div></div>");
});
$("#btn2").click(function(){
　　$("p").unwrap();
});

Parameter	Description
wrappingElement	Specify the structure to wrap each selected element Possible Values: HTML Element DOM Element jQuery Object
function(index)	Specify a function that returns the wrapping element index-Return the index position of the element in the collection