# jQuery website jQuery documentation

## DOM / Manipulation

### wrap(String html) : jQuery

html | String | A string of HTML, that will be created on the fly and wrapped around the target.

Wrap all matched elements with a structure of other elements. This wrapping process is most useful for injecting additional stucture into a document, without ruining the original semantic qualities of a document.

This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure - it is that element that will en-wrap everything else.

This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.

#### Example

##### Before

    <p>Test Paragraph.</p>

##### Code

    $("p").wrap("<div class='wrap'></div>");

##### Result

    <div class='wrap'><p>Test Paragraph.</p></div>

### wrap(Element elem) : jQuery

elem | Element | A DOM element that will be wrapped around the target.

Wrap all matched elements with a structure of other elements. This wrapping process is most useful for injecting additional stucture into a document, without ruining the original semantic qualities of a document.

This works by going through the first element provided and finding the deepest ancestor element within its structure - it is that element that will en-wrap everything else.

This does not work with elements that contain text. Any necessary text must be added after the wrapping is done.

#### Example

##### Before

    <p>Test Paragraph.</p><div id="content"></div>

##### Code

    $("p").wrap( document.getElementById('content') );

##### Result

    <div id="content"><p>Test Paragraph.</p></div>

### append(<Content> content) : jQuery

content | <Content> | Content to append to the target

Append content to the inside of every matched element.

This operation is similar to doing an appendChild to all the specified elements, adding them into the document.

#### Examples

Appends some HTML to all paragraphs.

##### Before

    <p>I would like to say: </p>

##### Code

    $("p").append("<b>Hello</b>");

##### Result

    <p>I would like to say: <b>Hello</b></p>

Appends an Element to all paragraphs.

##### Before

    <p>I would like to say: </p><b id="foo">Hello</b>

##### Code

    $("p").append( $("#foo")[0] );

##### Result

    <p>I would like to say: <b id="foo">Hello</b></p>

Appends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

##### Before

    <p>I would like to say: </p><b>Hello</b>

##### Code

    $("p").append( $("b") );

##### Result

    <p>I would like to say: <b>Hello</b></p>

### prepend(<Content> content) : jQuery

content | <Content> | Content to prepend to the target.

Prepend content to the inside of every matched element.

This operation is the best way to insert elements inside, at the beginning, of all matched elements.

#### Examples

Prepends some HTML to all paragraphs.

##### Before

    <p>I would like to say: </p>

##### Code

    $("p").prepend("<b>Hello</b>");

##### Result

    <p><b>Hello</b>I would like to say: </p>

Prepends an Element to all paragraphs.

##### Before

    <p>I would like to say: </p><b id="foo">Hello</b>

##### Code

    $("p").prepend( $("#foo")[0] );

##### Result

    <p><b id="foo">Hello</b>I would like to say: </p>

Prepends a jQuery object (similar to an Array of DOM Elements) to all paragraphs.

##### Before

    <p>I would like to say: </p><b>Hello</b>

##### Code

    $("p").prepend( $("b") );

##### Result

    <p><b>Hello</b>I would like to say: </p>

### before(<Content> content) : jQuery

content | <Content> | Content to insert before each target.

Insert content before each of the matched elements.

#### Examples

Inserts some HTML before all paragraphs.

##### Before

    <p>I would like to say: </p>

##### Code

    $("p").before("<b>Hello</b>");

##### Result

    <b>Hello</b><p>I would like to say: </p>

Inserts an Element before all paragraphs.

##### Before

    <p>I would like to say: </p><b id="foo">Hello</b>

##### Code

    $("p").before( $("#foo")[0] );

##### Result

    <b id="foo">Hello</b><p>I would like to say: </p>

Inserts a jQuery object (similar to an Array of DOM Elements) before all paragraphs.

##### Before

    <p>I would like to say: </p><b>Hello</b>

##### Code

    $("p").before( $("b") );

##### Result

    <b>Hello</b><p>I would like to say: </p>

### after(<Content> content) : jQuery

content | <Content> | Content to insert after each target.

Insert content after each of the matched elements.

#### Examples

Inserts some HTML after all paragraphs.

##### Before

    <p>I would like to say: </p>

##### Code

    $("p").after("<b>Hello</b>");

##### Result

    <p>I would like to say: </p><b>Hello</b>

Inserts an Element after all paragraphs.

##### Before

    <b id="foo">Hello</b><p>I would like to say: </p>

##### Code

    $("p").after( $("#foo")[0] );

##### Result

    <p>I would like to say: </p><b id="foo">Hello</b>

Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.

##### Before

    <b>Hello</b><p>I would like to say: </p>

##### Code

    $("p").after( $("b") );

##### Result

    <p>I would like to say: </p><b>Hello</b>

### clone(Boolean deep) : jQuery

deep | Boolean | (Optional) Set to false if you don't want to clone all descendant nodes, in addition to the element itself.

Clone matched DOM Elements and select the clones.

This is useful for moving copies of the elements to another location in the DOM.

#### Example

Clones all b elements (and selects the clones) and prepends them to all paragraphs.

##### Before

    <b>Hello</b><p>, how are you?</p>

##### Code

    $("b").clone().prependTo("p");

##### Result

    <b>Hello</b><p><b>Hello</b>, how are you?</p>

### appendTo(<Content> content) : jQuery

content | <Content> | Content to append to the selected element to.

Append all of the matched elements to another, specified, set of elements. This operation is, essentially, the reverse of doing a regular $(A).append(B), in that instead of appending B to A, you're appending A to B.

#### Example

Appends all paragraphs to the element with the ID "foo"

##### Before

    <p>I would like to say: </p><div id="foo"></div>

##### Code

    $("p").appendTo("#foo");

##### Result

    <div id="foo"><p>I would like to say: </p></div>

### prependTo(<Content> content) : jQuery

content | <Content> | Content to prepend to the selected element to.

Prepend all of the matched elements to another, specified, set of elements. This operation is, essentially, the reverse of doing a regular $(A).prepend(B), in that instead of prepending B to A, you're prepending A to B.

#### Example

Prepends all paragraphs to the element with the ID "foo"

##### Before

    <p>I would like to say: </p><div id="foo"><b>Hello</b></div>

##### Code

    $("p").prependTo("#foo");

##### Result

    <div id="foo"><p>I would like to say: </p><b>Hello</b></div>

### insertBefore(<Content> content) : jQuery

content | <Content> | Content to insert the selected element before.

Insert all of the matched elements before another, specified, set of elements. This operation is, essentially, the reverse of doing a regular $(A).before(B), in that instead of inserting B before A, you're inserting A before B.

#### Example

Same as $("#foo").before("p")

##### Before

    <div id="foo">Hello</div><p>I would like to say: </p>

##### Code

    $("p").insertBefore("#foo");

##### Result

    <p>I would like to say: </p><div id="foo">Hello</div>

### insertAfter(<Content> content) : jQuery

content | <Content> | Content to insert the selected element after.

Insert all of the matched elements after another, specified, set of elements. This operation is, essentially, the reverse of doing a regular $(A).after(B), in that instead of inserting B after A, you're inserting A after B.

#### Example

Same as $("#foo").after("p")

##### Before

    <p>I would like to say: </p><div id="foo">Hello</div>

##### Code

    $("p").insertAfter("#foo");

##### Result

    <div id="foo">Hello</div><p>I would like to say: </p>

### remove(String expr) : jQuery

expr | String | (optional) A jQuery expression to filter elements by.

Removes all matched elements from the DOM. This does NOT remove them from the jQuery object, allowing you to use the matched elements further.

Can be filtered with an optional expressions.

#### Examples

##### Before

    <p>Hello</p> how are <p>you?</p>

##### Code

    $("p").remove();

##### Result

    how are

##### Before

    <p class="hello">Hello</p> how are <p>you?</p>

##### Code

    $("p").remove(".hello");

##### Result

    how are <p>you?</p>

### empty() : jQuery

Removes all child nodes from the set of matched elements.

#### Example

##### Before

    <p>Hello, <span>Person</span> <a href="#">and person</a></p>

##### Code

    $("p").empty()

##### Result

    [ <p></p> ]