JQuery provides methods to manipulate DOM in an 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.
jQuery provides various methods to add, edit or delete DOM element(s) in the HTML page.
The following table lists some important methods to add/remove new DOM elements.
| Methods | Description |
| append() | Inserts content to the end of the element(s) which is specified by a selector. |
| before() | Inserts content (new or existing DOM elements) before an element(s) which is specified by a selector. |
| after() | Inserts content (new or existing DOM elements) after an element(s) which is specified by a selector. |
| prepend() | Insert content at the beginning of an element(s) specified by a selector. |
| remove() | Removes element(s) from DOM which is specified by selector. |
| replaceAll() | Replace target element(s) with specified element. |
| wrap() | Wrap an HTML structure around each element which is specified by the selector. |
- append():
The append() method inserts specified content at the end of the selected elements.
Syntax:
$(selector).append(content,function(index,html))
Example:
$(“button”).click(function(){
$(“p”).append(“<b>Appended text</b>”);
});
- before():
The before() method inserts specified content in front of (before) the selected elements.
Syntax:
$(selector).before(content,function(index))
Example:
$(“button”).click(function(){
$(“p”).before(“<p>Hello world!</p>”);
});
- after():
The after() method inserts specified content after the selected elements.
Syntax:
$(selector).after(content,function(index))
Example:
$(“button”).click(function(){
$(“p”).after(“<p>Hello world!</p>”);
});
- prepend():
The prepend() method inserts specified content at the beginning of the selected elements.
Syntax:
$(selector).prepend(content,function(index,html))
Example:
$(“button”).click(function(){
$(“p”).prepend(“<b>Prepended text</b>”);
});
- Remove Elements/Content:
To remove elements and content, there are mainly two jQuery methods:
- remove() – Removes the selected element (and its child elements)
$(“#div1”).remove();
- empty() – Removes the child elements from the selected element
$(“#div1”).empty();
- replaceAll():
The replaceAll() method replaces selected elements with new HTML elements.
Syntax:
$(content).replaceAll(selector)
Example:
$(“button”).click(function(){
$(“<h2>Hello world!</h2>”).replaceAll(“p”);
});
- wrap()
The wrap() method wraps specified HTML element(s) around each selected element.
Syntax:
$(selector).wrap(wrappingElement,function(index))
Example:
$(“button”).click(function(){
$(“p”).wrap(“<div></div>”);
});
The following figure shows how the DOM manipulation methods add new elements.
Content Manipulation
The html( ) method gets the html contents (innerHTML) of the first matched element.
Here is the syntax for the method ?
selector.html( )
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
$(document).ready(function() {
$(“div”).click(function () {
var content = $(this).html();
$(“#result”).text( content );
});
});
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.
selector.replaceWith( content )
Here content is what you want to have instead of original element. This could be HTML or simple text.
Example:
$(document).ready(function() {
$(“div”).click(function () {
$(this).replaceWith(“<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 where as the method remove( expr ) method removes all matched elements from the DOM.
Here is the syntax for the method ?
selector.remove( [ expr ])
or
selector.empty( )
You can pass optional parameter expr to filter the set of elements to be removed.
Example:
$(document).ready(function() {
$(“div”).click(function () {
$(this).remove( );
});
});
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 method before( content ) method inserts content before each of the matched elements.
selector.after( content )
or
selector.before( content )
Example:
$(document).ready(function() {
$(“div”).click(function () {
$(this).before(‘<div class=”div”></div>’ );
});
});
