tutorial on manipulating HTML elements using the Wrap () function in jquery _jquery

The Wrap () function is used to wrap the specified HTML structure outside each matching element.
Relative to this function is the unwrap () function, which is used for the parent element of the current matching element (only the parent element is removed and its internal nodes are all retained).
This function belongs to the jquery object (instance).

Grammar

Jqueryobject.wrap (wrapper)

Parameters
the wrapper string/element/jquery/function type is used to wrap the node of the matching element.
If the argument is wrapper as a string, it is considered as a jquery selector or an HTML string, and jquery will judge for itself.
JQuery 1.4 New support: Parameter wrapper can be a function. Wrap () Executes the function by traversing all the elements that match, and this in the function points to the corresponding DOM element.
Wrap () also passes a parameter to the function, which is the index of the current element in the matching element. The return value of a function is the content of the node used for the parcel (can be an HTML string, Dom element, or jquery object).
Note: If wrapper matches more than one element, only the first element is used as the wrapping element.
Note: If wrapper is a multilayered nested element (for example, <p><i></i></p>), Wrap () examines the first node nested within each layer from outside. If the node has no child nodes or the first child node is not an element node (such as a text node, a comment node, and so on), it stops inward lookup, appending (append ()) The current matching element directly to the end position within the current node.

return value
The return value of the Wrap () function is the jquery type, returning the current jquery object itself (to facilitate chained-style programming).
Note: Even if the wrapper element is an element in the current page, the element does not disappear from the original position. Because Wrap () uses a copy of the element (clone) to act as a parcel.

Example

<div class= "Container" >
 <div class= "inner" >Hello</div>
 <div class= "inner" >goodbye </div>
</div>

$ (". Inner"). Wrap (function () {return
 "<div class= '" + $ (This). Text () + "' ></div>";
});

The results are as follows:

<div class= "Container" >
 <div class= "Hello" >
  <div class= "inner" >Hello</div>
 </div>
 <div class= "Goodbye" >
  <div class= "inner" >Goodbye</div>
 </ Div>
</div>

Similar usage also has. Wrapall (),. Wrapinner (),. Unwrap () and so on!