jQuery - DOM Manipulation
user-pcr
jQuery provides methods for efficiently manipulating the DOM. You don't have to write a lot of code to change the value of an attribute on an element, or to extract HTML from a paragraph or section.
jQuery provides methods like .attr(), .html(), and .val() that act as getters, extracting information from DOM elements for further use.
Content Manipulation
The html() method gets the html content (innerHTML) of the first matched element.
Here is the syntax for the method −
selector.html ( )
DOM element replacement
You can replace a complete DOM element with specified HTML or DOM elements. The replaceWith(content) method is great for this purpose.
Here is the syntax for the method −
selector .replaceWith( content )
Here the content is what you want to have instead of the original element. It can be HTML or plain text.
Removing DOM Elements
There may be times when you want to remove one or more DOM elements from a document. jQuery provides two methods to resolve the situation.
The empty() method removes all child nodes from the set of matched elements, while the 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 an optional expr parameter to filter the set of elements to be removed.
Inserting DOM Elements
There may be times when you want to insert new or multiple DOM elements into an existing document. jQuery provides various methods for inserting elements in different places.
The after(content) method inserts content after each of the matched elements, and as the before( method ) method, inserts content before each of the matched elements.
Here is the syntax for the method −
selector .after( content ) or selector .before( content )
Here the content is what you want to insert. It can be HTML or plain text.
DOM manipulation methods
The following table lists all the methods that you can use to manipulate DOM elements.
Insert content after each of the matching elements.
Add content inside each matched element.
Append all matching elements to another specified set of elements.
Insert content before each of the matching elements.
Clone matches DOM elements and all their event handlers and selects clones.
Clone matches DOM Elements and select clones.
Remove all child nodes from the set of matched elements.
Set the HTML content of each matched element.
Get the HTML content (innerHTML) of the first matched element.
Insert all matching elements after another specified set of elements.
Insert all matching elements before another specified set of elements.
Append content inside each matched element.
Append all matched elements to another specified set of elements.
Removes all matching elements from the DOM.
Replaces the elements matched by the specified selector with the matched elements.
Replaces all matching elements with the specified HTML or DOM elements.
Set the text content of all matching elements.
Get the combined text content of all matched elements.
Wrap each matching element with the specified element.
Wrap each matching element with the specified HTML content.
Wrap all the elements in the matching set in a single wrapper element.
Wrap all the elements in the matching set in a single wrapper element.
Wrap the inner child content of each matched element (including text nodes) with a DOM element.
Wrap the inner child content of each matched element (including text nodes) with an HTML structure.
