JQuery Set Functions

The last article explained the process of retrieving text,html and value of an html element. This article explains the reverse process i.e. the process of setting the text, html and value of an html element via JQuery set functions. The functions used are text(), html() and val(). Notice, these are the same functions that get the values. The difference here is that you have to pass the values as the parameters to these functions in order to set them. On the other hand while getting values, you simply call the functions without parameters.

JQuery Set Text and HTML

The text() and html() methods set the text and html content of an element. The content to set is passed as parameter to these functions. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Set</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(){

             $('p').text("This is set by text function");
            
         });
             
        $(".b2").click(function(){
        
             $('p').html("This is set by <b>html</b> function");
            
         });
           
         });
      </script>
      <style>
          .b1, .b2{
              border: 1px solid #ccc;
              margin: 2px;
              display: inline-block;
          }
      </style>
   
</head>
    
<body>
    
    <div class="b1">Click to set text.</div>
    <div class="b2">Click to set html.</div>
    
    <p>Some random paragraph</p>
    
    
</body>

</html>

Download Code
Run Code

The above webpage contains two divs and one paragraph. Clicking the first div changes the text of the paragraph via text, on the other hand clicking second div changes the html content of the paragraph. Notice that in the script some random text has been passed to text function as well as the html function. This content is basically set as the paragraph text and html markup when div1 and div2 are clicked, respectively.

JQuery Set Value

To set values of any html element the val() function is used and the value to be set is passed as parameter to the function. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery Set</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(){

           $('#tb').val("Hello there!");
            
         });
  
         });
      </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 set text.</div>
    
    
</body>

</html>

Run Code
Download Code

The above page contains a div and a text box. When you click on the div, the value you specified inside the val() function in the script, is set inside the text box.

<<< JQuery Get FunctionsJQuery Add Functions >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .