Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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=
    </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=
    </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", 
            });
        });
    </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 arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!