Advanced jQuery DOM functions

Previously we discussed three basic DOM elements which are val() text() and html().
Today we will learn some more advanced jQuery DOM functions which are

  • Append()
  • Prepend()
  • After()
  • Before()
  • Remove()
  • Empty()
  • css()

Here is just a walk through of the basic definition of all of them along with syntax and examples.

Append()
This function is used to add content to the web pages and the append function insert the content in the form of string and this string is also an html object or an element at the end of the selected element.

Syntax:
$(“selector”).append (“appended content”);

Example:

Prepend()
This function is also used to add content to web pages. It inserts the content in the form of string and this string is also an html object or an element at the start or beginning of the selected element.

Syntax:
$(“selector”).prepend (“inserted content”);

Example:

After():
This function inserts the new content after the selected element on a new line.

Syntax:
$(“selector”).after (“added content”);

Example:

Before():
This function inserts the new content before the selected element, on a new line above the selected element.

Syntax:
$(“selector”).before (“inserted content”);

Example:

Remove():
This function is used to remove an html element or object.

Syntax:
$(“selector”).remove ();

Example:

Empty():
This function is used to delete the content of an html element or object.

Syntax:
$(“selector”).empty ();

Example:

css():
This function is used to apply the css style sheet effect on html elements using javascript.

Syntax:
$(“selector”).css (“property name”, “property value”);

Example: