jQuery |获取span元素的文本

给定一个 HTML 文档，任务是使用 JQuery 获取 标记的文本。

方法一：使用jQuery text() 方法：该方法用于设置或返回指定元素的文本内容。如果使用此方法返回内容，则返回所有匹配元素的文本内容（HTML 标签将被移除）。如果使用此方法设置内容，则会覆盖所有匹配元素的内容。

句法：

• 返回文本内容：

  $(selector).text()
  

• 设置文本内容：
  
  
  

  $(selector).text(content)
  

• 使用函数设置文本内容：

  $(selector).text(function(index, curContent))
  

参数：

• 内容：它是必需的参数。它指定所选元素的新文本内容。
• 函数(index, curContent):可选参数。它指定返回所选元素的新文本内容的函数。
  • index：返回元素在集合中的索引位置。
  • curContent：它返回所选元素的当前内容。

示例：本示例使用JQuery 的 text() 方法获取内容。

 
 
     
         
            JQuery | Get the text of a span element
        
          
        
        
     
      
     
          
         
            GeeksForGeeks 
         
          
        
            This is text of Span element. 
        
          
        
          
         
            Click Here
        
          
        
        
          
        
            $('button').on('click', function() {
                var $val = $('#GFG_Span').text();
                $('#GFG_DOWN').text($val);
            });     
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：使用jQuery html() 方法：该方法设置或返回指定元素的内容（HTML）。如果使用此方法返回内容，则返回第一个匹配元素的内容。如果使用此方法设置内容，则会覆盖所有匹配元素的内容。

句法：

• 返回内容：

  $(selector).html()
  

• 设置内容：

  $(selector).html(content)
  

• 使用函数设置内容：

  $(selector).html(function(index, curContent))
  

参数：

• 内容：该参数是必需的。它为包含 HTML 标记的选定元素指定新的文本内容。
• 函数(index, curContent)：这个参数是可选的。它指定了一个函数，该函数返回所选元素的新内容。
  • index：返回元素在集合中的索引位置。
  • curContent：它返回所选元素的当前 HTML 内容。

示例：本示例使用JQuery 的 html() 方法获取内容。

 
 
     
         
            JQuery | Get the text of a span element.
        
        
        
     
  
     
  
         
            GeeksForGeeks 
         
  
        
            This is text of Span element. 
        
  
        
          
         
            Click Here
        
          
        
        
          
        
            $('button').on('click', function() {
                var $val = $('#GFG_Span').html();
                $('#GFG_DOWN').text($val);
            });     
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。