Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Difference between html() text() and val() methods in jQuery

  • Last Updated : 10 Oct, 2021

In this article, we are going to discuss the differences between html(), text(), and val() methods and their usage.

1. jQuery html() method: The html() method is used to set or return the inner HTML of a selected element. It works similarly to innerHTML in normal JavaScript to set or get the content of the selected element. The above code tells the similarity between the jQuery html() method and JavaScript innerHTML. When you run this code then the inner HTML of div with id “demo” is changed with “hello Geeks ” and after 2 seconds the jquery API does a similar job as JavaScript does. It will change the inner HTML from “hello Geeks” to “welcome to geeksforgeeks”.

Syntax:

  • $().html(): It return the inner html of the selected element as a string
  • $().html(‘any string’): It set the inner html of the selected element.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
</head>
  
<body style="border: 2px solid green; 
        min-height: 250px;">
  
    <div style="display: flex; 
        justify-content: center;">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
    </div>
  
    <div id="demo" style="display: flex; 
        justify-content: center;">
    </div>
  
    <script>
        document.getElementById('demo').innerHTML
                = '<h3>hello Geeks</h3>';
  
        // After 2 sec this code will executed
        setTimeout(function () {
            $('#demo').html(
                '<h3>Welcome to geeksforgeeks</h3>');
        }, 2000);
    </script>
</body>
  
</html>

Output:

the output of the example

2. text() method: The jQuery text() method is used to set or get the inner text of the selected element. It works similarly to innerText in normal JavaScript to set or get the content of the selected element. 



The below code tells the similarity between the jQuery text() method and JavaScript innerText. When you run the code then at the beginning of the inner text of div with id “demo” is changed with “hello geeks”. After 2 seconds it changes to “welcome to geeksforgeeks” then at the end after 4 seconds the inner text is changed with “welcome to geeksforgeeks”.

Syntax:

  • $().text(): It returns the inner text of the selected element and the return type is a string.
  • $().text(‘any string’): It sets the inner text of the selected element.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
</head>
  
<body style="border:2px solid green;
    min-height:250px;">
      
    <div style="display:flex;
        justify-content:center;">
          
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
    </div>
  
    <div id="demo" style="display:flex;
        justify-content:center;">
    </div>
  
    <script>
        document.getElementById('demo').innerText
                = 'hello Geeks';
  
        // Code run after 2 sec
        setTimeout(function () {
            $('#demo').text(
                '<h3>Welcome to geeksforgeeks</h3>');
        }, 2000);
  
        // Code run after 4 sec
        setTimeout(function () {
            $('#demo').text('Welcome to geeksforgeeks');
        }, 4000);
    </script>
</body>
  
</html>

Output:

the output of the example-2

3. val() method: This method is only valid for the input elements like (input with type text, password, word, select, checkbox) to get and set the value. This method acts similarly as a  JavaScript value variable.

Syntax:

  • $().val(): It returns the value of the input fields.
  • $().val(‘any string’): It sets the value of the input.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </script>
</head>
  
<body style="border:2px solid green;
    min-height:250px;">
      
    <div style="display:flex;
        justify-content:center;">
          
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
    </div>
      
    <div id="demo" style="display:flex;
        justify-content:center;">
        <input type="text" id="name">
    </div>
  
    <script>
        document.getElementById('name').value = "Jhon Doe";
  
        // Run after 2 sec 
        setTimeout(function () {
            alert($('#name').val());
            $('#name').val('Hello');
        }, 2000);
    </script>
</body>
  
</html>

Output:

the output of the example-3

Explanation: In this example at the beginning, the value of the input field is changed with the JavaScript API and then after 2 seconds the value of the input field is shown in an alert prompt using the jQuery val() method which returns the value of the input field changed by JavaScript API and also change the input field using jQuery val() method.

Difference between and Usages of Html(),Text() and Val() functions in JQuery.

SLNO.html methodtext methodval() method
1It can only take one parameter as argumentIt can only take one parameter as an argumentIt can only take one parameter as an argument
2This method is used to get the HTML code inside the selected element in the form of text.This method is used to get the text inside the selected elementwe can’t use this method other than the input field.
3we can’t apply this method with input fieldwe can’t apply this method with input fieldwe can only apply this method input field to get the value enter by the user



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!