JQuery 获取span元素的文本

给出一个HTML文档，任务是用JQuery获得一个<span>标签的文本。

方法1：使用jQuery text() 方法 :该方法用于设置或返回指定元素的文本内容。如果这个方法用于返回内容，它返回所有匹配元素的文本内容（HTML标签将被删除）。如果这个方法是用来设置内容，它将覆盖所有匹配的元素的内容。

语法:

返回文本内容。

$(selector).text()

设置文本内容。

$(selector).text(content)

使用一个函数设置文本内容。

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

参数:

content。这是一个必要的参数。它指定了所选元素的新文本内容。
function(index, curContent)。它是可选参数。它指定了返回所选元素的新文本内容的函数。
index。它返回元素在集合中的索引位置。
curContent。它返回所选元素的当前内容。

例子：这个例子通过使用JQuery的text()方法获得内容。

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            JQuery | Get the text of a span element
        </title>
          
        <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
    </head> 
      
    <body style = "text-align:center;" id = "body"> 
          
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1> 
          
        <span id="GFG_Span" style = "font-size: 15px; font-weight: bold;">
            This is text of Span element. 
        </span>
          
        <br><br>
          
        <button> 
            Click Here
        </button>
          
        <p id="GFG_DOWN" style="color:green;font-size:20px;font-weight:bold;">
        </p>
          
        <script>
             $('button').on('click', function() { var$ val =  $('#GFG_Span').text();$ ('#GFG_DOWN').text($val);
            });     
        </script> 
    </body> 
</html>

输出:

在点击按钮之前。
点击该按钮后。

方法2：使用jQuery html() 方法：该方法设置或返回指定元素的内容（HTML）。如果这个方法被用来返回内容，它返回第一个匹配的元素的内容。如果这个方法被用来设置内容，它将覆盖所有匹配元素的内容。

语法:

返回 content:

$(selector).html()

Set content:

$(selector).html(content)

使用一个函数设置内容。

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

参数:

content。这个参数是必须的。它指定了包含HTML标签的选定元素的新文本内容。
function(index, curContent)。这个参数是可选的。它指定了一个函数来返回所选元素的新内容。
index。它返回元素在集合中的索引位置。
curContent。它返回所选元素的当前HTML内容。

例子：这个例子通过使用JQuery的html()方法获得内容。

<!DOCTYPE HTML> 
<html> 
    <head> 
        <title> 
            JQuery | Get the text of a span element.
        </title>
        <script src = 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
    </head> 
  
    <body style = "text-align:center;" id = "body"> 
  
        <h1 style = "color:green;" > 
            GeeksForGeeks 
        </h1> 
  
        <span id="GFG_Span" style="font-size:15px; font-weight:bold;">
            This is text of Span element. 
        </span>
  
        <br><br>
          
        <button> 
            Click Here
        </button>
          
        <p id="GFG_DOWN" style="color:green; font-size:20px; font-weight:bold;">
        </p>
          
        <script>
             $('button').on('click', function() { var$ val =  $('#GFG_Span').html();$ ('#GFG_DOWN').text($val);
            });     
        </script> 
    </body> 
</html>

输出: