jQuery | Set Content and Attributes

Last Updated : 22 Feb, 2019

Set Content: It is used to set the content using jQuery. The following methods are used to set the content 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 innerHTML content of the selected element.
val(): This parameter is used to set or return the value of attribute for the selected elements. This method apply on the HTML form elements.

Example: This example uses set content method (text(), html() and val() method) to set the content.

<!DOCTYPE html> 
<html> 
  
<head>  
    <title>jQuery Set 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 Set Content</h2> 
      
    <p>Full Form: <input type="text" id="GFG3" value="GFG"></p> 
      
    <button id="btn1">Set 1 line</button> 
    <button id="btn2">Set 2 line</button> 
    <button id="btn3">Set 3 line</button> 
      
    <!-- Script to set the content -->
    <script> 
        $(document).ready(function() { 
            $("#btn1").click(function() { 
                $("#GFG1").text("GEEKSFORGEEKS"); 
            }); 
              
            $("#btn2").click(function() { 
                $("#GFG2").html("<b>Set Content</b>"); 
            }); 
              
            $("#btn3").click(function() { 
                $("#GFG3").val("GeeksForGeeks"); 
            }); 
        }); 
    </script> 
</body> 
  
</html>   

Output:

Before Click on the button:
After Click on the Set 1 line button:
After Click on Set 2 line button:
After Click on Set 3 line button:

Set Attributes: The jQuery attr() method in jQuery is used to set and change attribute values.

Example: This example uses attr() method to set and change attribute values.

<!DOCTYPE html> 
<html> 
  
<head>  
    <title>jQuery Set 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 Set Attributes</h2> 
      
    <button id="btn1">Click</button> 
      
    <br><br> 
      
    <h3> 
        <a href="https://geeksforgeeks.org" id="GFG"> 
            geeksforgeeks.org 
        </a> 
    </h3> 
      
    <!-- Script to use set attribute method -->
    <script> 
        $(document).ready(function() { 
            $("button").click(function() { 
                $("#GFG").attr("href",  
"https://www.geeksforgeeks.org/jquery-introduction/"); 
            }); 
        }); 
    </script> 
</body> 
  
</html>   

Output:

Before click on link:
Click on link before click on button:
Click on link after click on button:

My Personal Notes

Related Articles