06 - jQuery and HTML

Introduction

Being a JavaScript library, jQuery provides a number of methods to deal with your HTML elements. Some of the methods include html, val, text, attr and so on. We will see these methods one by one to understand how jQuery can be used to deal with the HTML.

Different Methods

I am going to explain different HTML dealing methods with code samples. Before trying the sample codes, make sure that you add reference to the latest version of jQuery file correctly.

Sample Code that illustrates the Examples:

<!DOCTYPE html>
  <head>
   <title>Sample Code</title>
   <script src="jquery.js"></script>
   <script>
     //Add the code here
   </script>
  </head>
  <body>
   <h3>Input Form</h3>
   <label for="uname"><b>User Name:</b></label><input type="text" id="uname" /><br />
   <label for="pwd"><b>Password:</b></label><input type="text" id="pwd" /><br /><br />
   <input type="button" id="btnSubmit" value="Submit" /><br />
   <div id="result"></div>
  </body>
</html>

1. html()

The html method is used to set or get the HTML value of a selected element. If you want to set the value, then you need to pass it within parenthesis like this .html('value') and if you want to get the value, then you need to pass the method without any parameters.

Add the following lines of code inside the <script> section. Open the file using your browser after saving the changes.

$(document).ready(function() {
$("#btnSubmit").click(function(){
var setVal = $("label:first").html();
alert(setVal);
$("#result").html(setVal);
});
});

Here we are getting the value of the first label using the html method where we do not pass any value to the html method ($("label:first").html()). In the message, you will get the value as "<b>User Input:</b>", that is including the html tags.

In order to set the particular value, that is "User Name:", inside the <div> element, we passed that value within parenthesis of html method. Once you click the button, the output screen will look like this:

2. val()

The val method is used get or set value of any element with a value attribute. The val method without parameter will return the value of the selected element and the val method with a string parameter will set the value.

Clear the code inside the <script> section and add the following lines of code.

$(document).ready(function() {
$("#btnSubmit").click(function(){
var setVal = $("#uname").val();
$("#pwd").val("user name is " + setVal);
});
});

Enter some value inside the first textbox and then click the button. You could see the value inside the second textbox with some additional text.

3. text()

The text method is used to get or set the text content of the selected element. You can use the text method in both HTML and XML documents unlike the html method. You cannot use the text method to get value of input elements.

Clear the code inside the <script> section and add the following lines of code.

$(document).ready(function() {
$("#btnSubmit").click(function(){
var setVal = $("label:first").text();
alert(setVal);
$("#result").text(setVal);
});
});

Here, you will not get the html tags, but only the text.

4. attr()

The attr method can be used to read or write attribute values of HTML elements.

Clear the code inside the <script> section and add the following lines of code.

$(document).ready(function() {
$("#btnSubmit").click(function(){
var setVal = $("label:first").attr("for");
$("#result").html(setVal);
$("#btnSubmit").attr({"value":"Click"});
});
});

Here we first get the value of for attribute of the first label where we passed the name of the attribute as the parameter. We also set the value attribute of the button to Click. You could see that the button Submit becomes Click once you click the button.

Summary

We have seen a number of jQuery methods that deals with the HTML elements. We can use these methods effectively to make our jQuery code simpler.

Like us on Facebook

Wideskills