How to get a value within a bold tag using jQuery ?
Last Updated :
25 May, 2021
In this article, we will learn to get value within a bold tag using jQuery.
Approach: If we want to get the value within a bold tag, we can select the tag using jQuery. We can use the jQuery text() function to get the value of the bold tag. If we want to get values of all bold tags then we can use each() loop that will select all bold tags one by one.
Steps:
- Create some HTML bold tags.
- Create a jQuery function to get a value within bold tags.
- Show the value to the user.
Example 1: This example has three bold tags. When we click on the button it will get the values of all the bold tags using jQuery methods.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src=
</script>
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<b>This is first bold tag</b> <br />
<b>This is second bold tag</b><br />
<b>This is third bold tag</b><br /><br />
<button>Click here</button><br /><br />
<div id="output"></div>
<script>
$(document).ready(function () {
$("button").click(function () {
var count = 0;
var res = "";
$("b").each(function () {
var x =
"value of index " +
count +
", bold tag is: '" +
$(this).text() +
"'<br>";
res = res + " " + x;
count++;
});
$("#output").html(res);
});
});
</script>
</body>
</html>
|
Output:
Example 2: This Example has three bold tags and within each tag, it has a strong word. When we click on the button, a jQuery function gets the value within each bold tag and shows the appended text in an HTML div.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script src=
</script>
<script>
$(document).ready(function(){
$('#btnID').click(function() {
var text = "";
$("b").each(function() {
text += $(this).text();
text+=" ";
});
$("#showResult").text(text);
});
});
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<b>Welcome </b>
<b>to </b>
<b>GeeksforGeeks</b><br/><br/>
<input type="button" id="btnID" value="Get bold values"/>
<br/><br/>
<div id="showResult"> </div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...