Hello,
For a given HTML document and the task is to get the text of a <span> tag using JQuery.
you can Use jQuery text() method():This method is used to set or return the text content of specified elements. If this method is used to return content, it returns the text content of all matched elements (HTML tags will be removed). If this method is used to set content, it overwrites the content of all matched elements.
Let me give you the sample code how text() works so that you can have reference:
<!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;" >
Edureka
</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>
Tips: Provide each span class with their id to select and associate with the clicks.
Thank you!! Hope this will be helpful to you