Jquery_dom the way to learn------wrapping elements

1. Wrap () : Wraps an HTML structure around each element that matches in the collection

Simply look at the code:

<span> Connect Text </span>

Add a parcel A to the span element

$ (' span '). Wrap (' <a href= "http://soulsjie.com" ></a> ")

Last structure, p element adds a parent div structure

<a href= "http://soulsjie.com" ><span> connection text </span></a>

2. Dom wrapping Unwrap () method

To use. Remove () to remove the parent element of the selected element is more complex at this time unwrap () can delete the parent element of the selected element

Use:

Find all P elements, delete parent container div
$ (' P '). Unwrap (' <div></div> ')

3. Dom wrapping Wrapall () method

. Wrap () is wrapped for a single element and needs to be wrapall () when wrapping several elements

Such as:

Want to wrap the following p tag inside a div:

<p> content 1</p>

<p> content 2</p>

1. Directly add parameters to the package

$ (' P '). Wrapall (' <div></div> ')

2. Package content based on return value of function

$ (' P '). Wrapall (function () {    return ' <div><div/> ';})

The structure after the package is as follows:

<div>    <p> content 1</p>    <p> content 2</p></div>

4. Dom Wrapping Wrapinner () method

If you want to wrap all the child elements within a set of elements with other elements and act as child elements of the specified element, jquery provides a Wrapinner method for such processing.

Original structure:

<div> Content 1</div><div> Content 2</div>

Wrapping the div content on p elements

$ (' div '). Wrapinner (' <p></p> ')

The final structure, the content of the matching div was wrapped by P

<div>    <p> content 1</p></div><div>    <p> content 2</p></div>

Jquery_dom the way to learn------wrapping elements