jQuery | Get Content and Attributes

Last Updated : 22 Feb, 2019

Get Content: In order to get the content of DOM object, there are three simple methods.jQuery methods for DOM manipulation which are listed below:

text(): It is used to set or return the text content of selected elements.
html(): It is used to set or return the content of selected elements including HTML markup.
val(): It is used to set or return the value of form fields.

Example: This example uses text content method to get the content.

<!DOCTYPE html> 
<html> 
  
<head>  
    <title>jQuery Get Content</title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
</head>  
  
<body style="text-align:center;"> 
  
    <h1 id="GFG1" style = "color:green;"> 
        GeeksForGeeks 
    </h1> 
      
    <h2 id="GFG2">jQuery Get Content</h2> 
      
    <button id="btn1">Text</button> 
    <button id="btn2">HTML</button> 
      
    <!-- Script to get the content -->
    <script> 
        $(document).ready(function(){ 
            $("#btn1").click(function(){ 
                alert("Text: " + $("#GFG2").text()); 
            }); 
              
            $("#btn2").click(function(){ 
                alert("HTML: " + $("#GFG1").html()); 
            }); 
        }); 
    </script> 
</body> 
  
</html>   

Output:

Before click on the button:
After click on the Text button:
After click on the Html button:

Get Attributes The jQuery attr() method is used to get attribute values of DOM objects.

Example: This example uses attr() method to get the attribute value.

<!DOCTYPE html> 
<html> 
  
<head>  
    <title>jQuery Get Attributes</title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
</head>  
  
<body style="text-align:center;"> 
   
    <h1 style = "color:green;"> 
        GeeksForGeeks 
    </h1> 
      
    <h2>jQuery Get Attributes</h2> 
      
    <button id="btn1">Click</button> 
      
    <br><br> 
      
    <h3> 
        <a href="https://geeksforgeeks.org" id="GFG"> 
            geeksforgeeks.org 
        </a> 
    </h3> 
      
    <!-- Script to get the attribute value -->
    <script> 
        $(document).ready(function(){ 
            $("button").click(function(){ 
                alert($("#GFG").attr("href")); 
            }); 
        }); 
    </script> 
</body> 
  
</html>   