JQuery – Get/Set Attributes and Content

In jquery today we will see how to get and set the value of HTML and we will also see what is dom-manipulation and how to use it in jquery we will also see in simple language dom plays an important part of jquery Sodom is very important for jquery so below we will see step by step how dom process of jquery works.

DOM = Document Object Model

The dom process of jquery can be accessed by attaching HTML and XML document

Get Content in Jquery- text(), html(), and val()

Following are the three important and simple DOM manipulation processes of jquery:

• text() – Sets or returns the text content of selected elements
• html() – Sets or returns the content of selected elements
• val() – Sets or returns the value of form fields

The following is a demo of the text() and html() method of jquery get content:

Example

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

Here is an example of how to get a value using input as shown below using val()

Example

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

Get Attributes in Jquery – attr()

The attr() method of jquery is used to get the value of the attribute

We will see how to get the value of href attribute as given below:

Example

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

JQuery – Set Attributes and Content

Set Content in Jquery- text(), html(), and val()

We will use three simple set content methods of jquery:

• text() – Sets or returns the text content of selected elements
• html() – Sets or returns the content of selected elements
• val() – Sets or returns the value of form fields

The following is an example of how the text(), html(), and val() methods of set content work:

Example

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

In Jquery Callback Function for text(), html(), and val()

The above callback function has two parameters: the index of the current element in the list of selected elements and the original (old) value. Then you want to use the string as the new value from the function. It also comes with three jQuery methods: text(), html() and val(), callback function.

In the example below, we will see how text () and html () methods work in callback functions:

Example

$("#btn1").click(function(){
  $("#test1").text(function(i, origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i, origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

Set Attributes in Jquery – attr()

The attr() method of jquery is used to set/change the value of the attribute

In the following example we will see how to change (set) the value of href attribute:

Example

$("button").click(function(){
  $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});

The attr() method of jquery gives us access to multiple attributes at the same time.

In the example below we will see how to set the value of href and title at the same time:

Example

$("button").click(function(){
  $("#w3s").attr({
    "href" : "https://www.w3schools.com/jquery/",
    "title" : "W3Schools jQuery Tutorial"
  });
});

In Jquery Callback Function for attr()

The callback function has two parameters: the index of the current element in the list of selected elements and the original (old) attribute value. Then you want to use the string as the new attribute value from the function. The jQuery method attr() also comes with a callback function.

In the following example we will see how the attr() method will be used in a callback function:

Example

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