JQuery Get Functions

In our article on attributes we saw how we could use attr() function to get and set the attribute value of any html tag. Apart from getting attribute values, we can also get the text contained by an element, the html markup of the element and the value of any html element using JQuery get functions. This is done using the text(), html() and val() functions respectively. Take a look at the following example

JQuery Get Text and Html

The text() function simply returns the text inside the any html element while the html() function retrieves html markup as well. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Get</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $(".b1").click(function(){
           
             
             alert("Text is :" + $('p').text());
            
         });
             
        $(".b2").click(function(){
        
             alert("HTML is :" + $('p').html());
            
         });
           
         });
      </script>
      <style>
          .b1, .b2{
              border: 1px solid #ccc;
              margin: 2px;
              display: inline-block;
          }
      </style>
   
</head>
    
<body>
    
    <div class="b1">Click to get text.</div>
    <div class="b2">Click to get html.</div>
    
    <p>This is a <em>random </em> paragraph</p>
    
    
</body>

</html>

Download Code
Run Code

The above webpage contains two buttons and a paragraph. When the first button is clicked, the text contained by the paragraph shows up in the alert box. Similarly, clicking the second button displays the text along with the any html markup contained inside the paragraph.

JQuery Get Value

The val() function gets the value of any html element. For instance you can get the value entered by the user inside the input text box using val() function. Have a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Get</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $(".b1").click(function(){

             alert("Value is : " + $('#tb').val());
            
         });
  
         });
      </script>
      <style>
          .b1, .b2{
              border: 1px solid #ccc;
              margin: 2px;
              display: inline-block;
          }
      </style>
   
</head>
    
<body>

    <input type="text" name="tb" id="tb">
      <div class="b1">Click to get text.</div>
    
    
</body>

</html>

Run Code
Download Code

The above html page contains a div and a text box. When the div is clicked an event is fired. This event is handled by the JQuery click event handler. Inside the event handler, the factory function selects the text box via id and retrieves its value using val() function. This value is then displayed in the alert box.

<<< JQuery Chaining FunctionsJQuery Set Functions >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .