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.

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) : jQuery

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) : jQuery

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) : jQuery

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) : jQuery

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) : jQuery

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) : jQuery

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) : jQuery

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) : jQuery

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> ]

jQuery website jQuery documentation