What is DOM Manipulation in jQuery? Different DOM Manipulation Methods
What is jQuery dom-manipulation?
The ability to manipulate the DOM is an essential feature of jQuery.
jQuery includes several DOM-related methods that make accessing and manipulating elements and attributes a breeze.
jQuery includes several valuable methods for changing and manipulating HTML elements and attributes.
DOM Manipulation Methods in jQuery
The DOM establishes a standard for accessing HTML and XML documents, which is as follows:
"The W3C Document Object Model (DOM) is a platform- and language-independent interface that enables programs and scripts. It's updating a document's content, structure, and style."
For DOM manipulation, there are three helpful yet straightforward jQuery methods:
-
text()
: The text content of selected elements is set or returned. -
HTML()
: Sets or gets the content of a group of elements (including HTML markup) -
val()
: The value of form fields is set or returned.
Look at the below how to use the jQuery text()
and HTML()
methods to get content:
Example
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
Look at the below example. It shows how to use the jQuery val()
method to get the value of an input field:
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});