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

jQuery | Set Content and Attributes