You Are Here

jQuery Get and Set Methods

jQuery Get Content and Attributes

jQuery provides methods for changing and manipulating HTML elements and attributes.

jQuery DOM Manipulation:

One very important part of jQuery is the probability to manipulate the DOM.
The jquery contains a group of DOM related methods to easily access and manipulate elements and attributes.

What is DOM(Document Object Model)?

The DOM is used to define a standard for accessing HTML and XML documents: “The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

Get Content using text(), html(), and val()

jQuery methods for DOM manipulation are:
  • text() - It sets or returns the text content of selected elements
  • html() - It sets or returns the content of selected elements including HTML markup
  • val() - It sets or returns the value of form fields
The following example shows how to get content with the jQuery text() and html() methods.

Example:

$("#button1").click(function(){
alert("Text: " + $("#demo").text());
});
$("#button2").click(function(){
alert("HTML: " + $("#demo").html());
});
Try it
The following example shows how to get the value of an input field with the jQuery val() method.

Example:

$("#btn1").click(function(){
alert("Value: " + $("#demo").val());
});
Try it

Get Attributes attr():

The attr() method is used to get attribute values.
The following example shows how to get the value of the href attribute in a link.

Example:

$("button").click(function(){
alert($("#demo").attr("href"));
});
Try it

jQuery Set Content and Attributes:

Set Content using text(), html(), and val():

The methods to set the content:
  • text() - It sets or returns the text content of selected elements
  • html() - It sets or returns the content of selected elements including HTML markup
  • val() - It sets or returns the value of form fields
The following example demonstrates how to set content with the jQuery text(), html(), and val() methods.

Example:

$("#btn1").click(function() {
$("#demo1").text("W3CODINGSCHOOLS");
});
$("#btn2").click(function() {
$("#demo2").html("<b>Set Content</b>");
});
$("#btn3").click(function() {
$("#demo").val("W3CodingSchools");
});
Try it

Set Attributes attr():

The jQuery attr() method is used to set or change attribute values.
The following example shows how to set the value of the href attribute in a link.

Example:

$("button").click(function(){
$("#demo").attr("href", "http://www.w3codingschools.com/jquery-tutorial-introduction-of-jquery/");
});
Try it
The attr() method allows us to set multiple attributes at the same time.
The following example shows how to set both the href and title attributes at the same time.

Example:

$("button").click(function(){
$("#demo").attr({
"href" : "http://www.w3codingschools.com/jquery-tutorial-introduction-of-jquery/",
"title" : "jQuery Tutorial"
});
});
Try it

A Callback Function for attr():

The jQuery method attr(), provides a callback function. It has two parameters, the index of the current element in the list of selected elements and the original (old) attribute value. You can return the string you want to use as the new attribute value from the function.
The following example shows attr() with a callback function:

Example:

$("button").click(function(){
$("#demo").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
Try it

Ask a Question

Your email address will not be published. Required fields are marked *