Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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 method text method val() method
1 It can only take one parameter as argument It can only take one parameter as an argument It can only take one parameter as an argument
2 This 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 element we can’t use this method other than the input field.
3 we can’t apply this method with input field we can’t apply this method with input field we can only apply this method input field to get the value enter by the user


Last Updated : 10 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads