What is DOM Manipulation in jQuery? Different DOM Manipulation Methods

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.

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());
});