JQUERY - DOM MANIPULATION

JQuery provides methods to manipulate DOM in efficient way. You do not need to write big code to modify the value of any element's attribute or to extract HTML code from a paragraph or division.

JQuery provides methods such as .attr(), .html(), and .val() which act as getters, retrieving information from DOM elements for later use.

Content Manipulation

The html( ) method gets the html contents (innerHTML) of the first matched element. Here is the syntax for the method:


Example

Following is an example which makes use of .html() and .text(val) methods. Here .html() retrieves HTML content from the object and then .text( val ) method sets value of the object using passed parameter:



DOM Element Replacement

You can replace a complete DOM element with the specified HTML or DOM elements. The replaceWith( content ) method serves this purpose very well.

Here is the syntax for the method:


Here content is what you want to have instead of original element. This could be HTML or simple text.

Example

Following is an example which would replace division element with "<h1>JQuery is Great</h1>":



Removing DOM Elements

There may be a situation when you would like to remove one or more DOM elements from the document. JQuery provides two methods to handle the situation. The empty( ) method remove all child nodes from the set of matched elements whereas the remove( expr ) method removes all matched elements from the DOM. Here is the syntax for the method:


You can pass optional paramter expr to filter the set of elements to be removed.

Example

Following is an example where elements are being removed as soon as they are clicked:



Inserting DOM Elements

There may be a situation when you would like to insert new one or more DOM elements in your existing document. JQuery provides various methods to insert elements at various locations. The after( content ) method insert content after each of the matched elements where as the before( content ) method inserts content before each of the matched elements. Here is the syntax for the method:


Here content is what you want to insert. This could be HTML or simple text.

Example

Following is an example where <div> elements are being inserted just before the clicked element:



DOM Manipulation Methods

Following table lists down all the methods which you can use to manipulate DOM elements:

S.No	Method	Description
1	after( content )	Insert content after each of the matched elements.
2	append( content )	Append content to the inside of every matched element.
3	appendTo( selector )	Append all of the matched elements to another, specified, set of elements.
4	before( content )	Insert content before each of the matched elements.
5	clone( bool )	Clone matched DOM Elements, and all their event handlers, and select the clones.
6	clone( )	Clone matched DOM Elements and select the clones.
7	empty( )	Remove all child nodes from the set of matched elements.
8	html( val )	Set the html contents of every matched element.
9	html( )	Get the html contents (innerHTML) of the first matched element.
10	insertAfter( selector )	Insert all of the matched elements after another, specified, set of elements.
11	insertBefore( selector )	Insert all of the matched elements before another, specified, set of elements.
12	prepend( content )	Prepend content to the inside of every matched element.
13	prependTo( selector )	Prepend all of the matched elements to another, specified, set of elements.
14	remove( expr )	Removes all matched elements from the DOM.
15	replaceAll( selector )	Replaces the elements matched by the specified selector with the matched elements.
16	replaceWith( content )	Replaces all matched elements with the specified HTML or DOM elements.
17	text( val )	Set the text contents of all matched elements.
18	text( )	Get the combined text contents of all matched elements.
19	wrap( elem )	Wrap each matched element with the specified element.
20	wrap( html )	Wrap each matched element with the specified HTML content.
21	wrapAll( elem )	Wrap all the elements in the matched set into a single wrapper element.
22	wrapAll( html )	Wrap all the elements in the matched set into a single wrapper element.
23	wrapInner( elem )	Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
24	wrapInner( html )	Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.

after( content ) Method

The after( content ) method inserts content after each of the matched elements.

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• content: Content to insert after each target. This could be HTML or Text content

Example

Following is a simple example showing the usage of this method:



append( content ) Method

The append( content ) method appends content to the inside of every matched element.

Syntax

Here is the simple syntax to use this method


Parameters

Here is the description of all the parameters used by this method:

• content: Content to insert after each target. This could be HTML or Text content

Example

Following is a simple example showing the usage of this method:


This will produce the following result:



appendTo( selector ) Method

The appendTo( selector ) method appends all of the matched elements to another, specified, set of elements.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• selector: This is the target to which the content will be appended.

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


before( content ) Method


The before( content ) method inserts content before each of the matched elements.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• content: Content to insert before each target. This could be HTML or Text content

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


clone( bool ) Method

The clone( bool ) method clones matched DOM Elements, and all their event handlers, and select the clones.

This is useful for moving copies of the elements, and their events, to another location in the DOM.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• bool: Set to true to enable cloning of event handlers.

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


clone( ) Method

The clone( ) method clones matched DOM Elements and select the clones. This is useful for moving copies of the elements to another location in the DOM.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• NA:

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


empty( ) Method

The empty( ) method removes all child nodes from the set of matched elements.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• NA:

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


html( val ) Method

The html( val ) method sets the html contents of every matched element. This property is not available on XML documents.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• val: This is the html content to be set.

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


html( ) Method

The html( val ) method gets the html contents (innerHTML) of the first matched element. This property is not available on XML documents.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• NA:

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


insertAfter( selector ) Method

The insertAfter( selector ) method inserts all of the matched elements after another, specified, set of elements.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• selector: Content after which the selected element(s) is inserted.

Example

Following is a simple example showing the usage of this method. This inserts division element with ID of "source" after an element which is being clicked.


This will produce the following result:

Click on any square below to see the result:

insertBefore( selector ) Method

The insertBefore( selector ) method inserts all of the matched elements before another, specified, set of elements.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• selector: Content before which the selected element(s) is inserted.

Example

Following is a simple example showing the usage of this method. This inserts division element with ID of "source" before an element which is being clicked.


This will produce the following result:

Click on any square below to see the result:

prepend( content ) Method

The prepend( content ) method prepends content to the inside of every matched element. Compare it with append( content ) method.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• content: Content to insert after each target. This could be HTML or Text content

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


prependTo( selector ) Method

The prependTo( selector ) method prepends all of the matched elements to another, specified, set of elements. Compare it with appendTo( selector ) method.

Syntax

Here is he simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• selector: This is the target to which the content will be prepended.

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


remove( expr ) Method

The remove( expr ) method removes all matched elements from the DOM. This does NOT remove them from the jQuery object, allowing you to use the matched elements further. Compare it with empty() method.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• expr: This is an optional jQuery expression to filter the set of elements to be removed

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


replaceAll( selector ) Method

The replaceAll( selector ) method replaces the elements matched by the specified selector with the matched elements.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• selector: The elements to find and replace the matched elements with.

Example

Following is a simple example showing the usage of this method. This replaces clicked one square by a new division:


This will produce the following result:


replaceWith( content ) Method

The replaceWith( content ) method replaces all matched elements with the specified HTML or DOM elements. This returns the JQuery element that was just replaced, which has been removed from the DOM.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• content : Content to replace the matched elements with.

Example

Following is a simple example showing the usage of this method. This replaces clicked one square by a new division. Compare the syntax with replaceAll( selector )method


This will produce the following result:


text( val ) Method

The text( val ) method gets the combined text contents of all matched elements. Similar to html( val ), but escapes HTML (replace "<" and ">" with their HTML entities).

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• val: This is the text value to be set.

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


text( ) Method

The html( val ) method gets the combined text contents of all matched elements.

The result is a string that contains the combined text contents of all matched elements. This method works on both HTML and XML documents.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• NA

Example

Following is a simple example showing the usage of this method:


This will produce the following result:


wrap( elem ) Method

The wrap( elem ) method wraps each matched element with the specified element.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• elem : A DOM element that will be wrapped around each target.

Example

Following is a simple example showing the usage of this method. This wraps destination square with a square when any square gets cli cked:


This will produce the following result:

Click on any square below to see the result:

wrap( html ) Method

The wrap( html ) method wraps each matched element with the specified HTML content.

This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.

Syntax

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• elem : A string of HTML that will be created on the fly and wrapped around each target.

Example

Following is a simple example showing the usage of this method. This wraps destination square with a sqaure when any square gets clicked:


This will produce the following result:

Click on any square below to see the result:

wrapAll( elem ) Method

The wrapAll( elem ) method wraps all the elements in the matched set into a single wrapper element.

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• elem : A DOM element that will be wrapped around the target.

Example

Following is a simple example showing the usage of this method. This wraps all the squares with a new square:


This will produce the following result:


wrapAll( html ) Method

The wrapAll( html ) method wraps all the elements in the matched set into a single wrapper element.

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• html: A string of HTML that will be created on the fly and wrapped around each target.

Example

Following is a simple example showing the usage of this method. This wraps all the squares with a new square:


This will produce the following result:

Click on any square below to see the result:

wrapInner( elem ) Method

The wrapInner( elem ) method wraps the inner child contents of each matched element (including text nodes) with a DOM element.

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• html : A DOM element that will be wrapped around the target.

Example

Following is a simple example showing the usage of this method. This selects all divisions and wraps a bold tag around the content of clicked one square:


This will produce the following result:

Click on any square below to see the result:

wrapInner( html ) Method

The wrapInner( html ) method wraps the inner child contents of each matched element (including text nodes) with an HTML structure.

Here is the simple syntax to use this method:


Parameters

Here is the description of all the parameters used by this method:

• html : A string of HTML that will be created on the fly and wrapped around the target.

Example

Following is a simple example showing the usage of this method. This selects all divisions and wraps a bold tag around the content of clicked one square:


This will produce the following result:

Click on any square below to see the result:

---