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:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script> $(document).ready(function(){ $("button").click(function(){ $("ul").append("<li>New List item</li>"); }); }); </script> <ul> <li>List item A</li> <li>List item B</li> <li>List item C</li> </ul> <button>Append New list items</button> |
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:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script> $(document).ready(function(){ $("button").click(function(){ $("ul").prepend("<li>New List item</li>"); }); }); </script> <ul> <li>List item A</li> <li>List item B</li> <li>List item C</li> </ul> <button>Prepend New list items</button> |
After():
This function inserts the new content after the selected element on a new line.
Syntax:
$(“selector”).after (“added content”);
Example:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> $(document).ready(function(){ $("button").click(function(){ $("ul").after("<li>New List item</li>"); }); }); </script> <ul> <li>List item A</li> <li>List item B</li> <li>List item C</li> </ul> <button>Add after list items</button> |
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:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> $(document).ready (function () { $("button").click (function () { $("ul").before ("<li>New List item</li>"); }); }); </script> <ul> <li>List item A</li> <li>List item B</li> <li>List item C</li> </ul> <button>Add before list items</button> |
Remove():
This function is used to remove an html element or object.
Syntax:
$(“selector”).remove ();
Example:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> $(document).ready(function(){ $("button").click(function(){ $("li:last-child()").remove(); }); }); </script> <ul> <li>List item A</li> <li>List item B</li> <li>List item C</li> </ul> <button>Delete last list item</button> |
Empty():
This function is used to delete the content of an html element or object.
Syntax:
$(“selector”).empty ();
Example:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> $(document).ready(function(){ $("button").click(function(){ $("li").empty(); }); }); </script> <ul> <li>List item A</li> <li>List item B</li> <li>List item C</li> </ul> <button>Empty list items</button> |
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:
| 1 2 3 4 5 6 7 8 9 10 11 | <script> $(document).ready(function(){ $("button").click(function(){ $("h1").css("color","red"); }); }); </script> <h1>This is a black line</h1> <button>Apply CSS</button> |