jQuery Add - CodeGK

♦ jQuery Add

♣ About jQuery Add

jQuery provides a way to add Textual/HTML data at particular location in the layout.
Four of the ways are :

append() :- Inserts Textual/HTML data at the end of the selected HTML elements
prepend() :- Inserts Textual/HTML data at the beginning of the selected HTML elements
after() :- Inserts Textual/HTML data after the selected HTML elements
before() :- Inserts Textual/HTML data before the selected HTML elements

Inserts Textual/HTML data at the end of the selected HTML elements.

Basic Syntax

$(selector).append(data);

selector: the HTML element to be selected.
data: the data to inserted in the bottom of selected HTML element.

In this example, jQuery append() method is illustrated.

Example

Input:

Output:

Inserts Textual/HTML data at the beginning of the selected HTML elements.

Basic Syntax

$(selector).prepend(data);

selector: the HTML element to be selected.
data: the data to inserted on top of selected HTML element.

In this example, jQuery prepend() method is illustrated.

Example

Input:

Output:

Inserts Textual/HTML data after the selected HTML elements.

Basic Syntax

$(selector).after(data);

selector: the HTML element to be selected.
data: the data to inserted Below the selected HTML element.

In this example, jQuery after() method is illustrated.

Example

Input:

Output:

Inserts Textual/HTML data before the selected HTML elements.

Basic Syntax

$(selector).before(data);

selector: the HTML element to be selected.
data: the data to inserted Above the selected HTML element.

In this example, jQuery before() method is illustrated.

Example

Input:

Output: