jQuery 中 html() text() 和 val() 方法的区别

在本文中，我们将讨论 html()、text() 和 val() 方法之间的区别及其用法。

1. jQuery html()方法： html()方法用于设置或返回被选元素的内部HTML。它与普通 JavaScript 中的innerHTML类似，用于设置或获取所选元素的内容。上面的代码说明了 jQuery html()方法和 JavaScript innerHTML之间的相似之处。当您运行此代码时， id 为“ demo”的div的内部 HTML 将更改为“hello Geeks”，2 秒后 jquery API 会执行与 JavaScript 类似的工作。它将内部 HTML 从“hello Geeks”更改为“welcome to geeksforgeeks”。

句法：

• $().html():它 将所选元素的内部 html 作为字符串返回
• $().html('any 字符串')：设置被选元素的内部html。

HTML

  

    
    

  

  
    
        
            GeeksforGeeks
        
    
  
    
    
  
    
        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);
    

  

输出：

示例的输出

2. text()方法： jQuery text()方法用于设置或获取被选元素的内部文本。它与普通 JavaScript 中的innerText类似，用于设置或获取所选元素的内容。

下面的代码说明了 jQuery text()方法和 JavaScript innerText 之间的相似之处。当您运行代码时， id为“demo”的div内部文本的开头将更改为“hello geeks”。 2 秒后，它变为“欢迎来到 geeksforgeeks”，然后在 4 秒后，内部文本变为“欢迎来到 geeksforgeeks”。

句法：

• $().text()：返回被选元素的内部文本，返回类型为字符串。
• $().text('any 字符串')：设置被选元素的内部文本。

HTML

  

    
    

  

      
    
          
        
            GeeksforGeeks
        
    
  
    
    
  
    
        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);
    

  

输出：

示例 2 的输出

3. val()方法：该方法只对输入元素（输入类型为文本、密码、单词、选择、复选框）有效，获取和设置值。此方法的作用类似于 JavaScript值变量。

句法：

• $().val()：它返回输入字段的值。
• $().val('any 字符串')：它设置输入的值。

HTML

  

    
    

  

      
    
          
        
            GeeksforGeeks
        
    
      
    
        
    
  
    
        document.getElementById('name').value = "Jhon Doe";
  
        // Run after 2 sec 
        setTimeout(function () {
            alert($('#name').val());
            $('#name').val('Hello');
        }, 2000);
    

  

输出：

示例 3 的输出

说明：在这个例子中，在开始的时候，输入字段的值是用 JavaScript API 改变的，然后在 2 秒后，输入字段的值会显示在使用 jQuery val()方法返回的值的警报提示中输入字段由 JavaScript API 更改，还使用 jQuery val()方法更改输入字段。

JQuery中Html()、Text()和Val()函数的区别和用法。

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