In this tutorial, I will explore how to set or change the value inside the <span> tag using HTML, CSS, and JavaScript.
In HTML, the tag serves as an inline container that can be used to group items for decoration or to provide JavaScript functionality. The tag is used as a generic container and does not automatically add any structure or layout to the page, in contrast to block-level components.
To produce dynamic and visually appealing web pages, the content inside a tag is frequently changed dynamically using JavaScript or styled with CSS.
Using HTML to Set Content in the <span> Tag
By enclosing text or other inline components between the opening and closing tags in HTML, the content contained within the <span> tag can be directly set.
I used the term "simple" in the tag's content in this example. Unless altered by user input or scripting, the content is set directly in the HTML file, rendering it static.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Value in Span tag in HTML</title>
</head>
<body>
<p>This is a <span>simple</span> example.</p>
</body>
</html>
Styling Content Inside the <span> Tag with CSS
The material enclosed in a tag can be styled with CSS. When you wish to apply a certain style to a section of text or material inside a text block, this is helpful.
In this example, I have used the <span> tag is given a class highlight, which is styled using CSS. The content inside the <span> tag will appear in red and bold.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
<title>Set Value in Span tag with CSS</title>
</head>
<body>
<p>This is a <span class="highlight">highlighted</span> word.</p>
</body>
</html>
Setting and Changing Content in the <span> Tag with JavaScript
JavaScript is usually used to dynamically set or modify the content of a tag. When material needs to be changed in interactive online applications in response to user actions or other events, this is helpful.
Example 1: Setting Content on Page Load
In this example, I have used the innerText property of the <span> tag to display the current time when the page loads. The id attribute I have used to identify the specific <span> tag, and JavaScript dynamically inserts the time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Value in Span in HTML</title>
</head>
<body>
<p>The time is: <span id="time"></span></p>
<script>
document.getElementById('time').innerText = new Date().toLocaleTimeString();
</script>
</body>
</html>
Example 2: Changing Content Based on User Interaction
Here, First I have created a function called changeText in this example.
In this example, pressing the button starts the changeText function, which uses the innerText property to modify the content of the tag to "Text has been changed!"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Value in Span in HTML : Onlyxcodes</title>
</head>
<body>
<p>Click the button to change the text:</p>
<p><span id="text">Original text</span></p>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
document.getElementById('text').innerText = "Text has been changed!";
}
</script>
</body>
</html>
Other Methods to Set Content in the <span> Tag
Apart from innerText, other JavaScript properties like innerHTML and textContent can also be used to set or change the content of a <span> tag.
innerHTML: This property sets or returns the HTML content (including HTML tags) inside an element. It allows you to insert HTML content into a <span> tag.
document.getElementById('spanId').innerHTML = "<strong>Bold text</strong>";textContent: This property sets or returns the text content of an element, excluding HTML tags. It is similar to innerText but does not render line breaks and other formatting differences.
document.getElementById('spanId').textContent = "Plain text";Wrapping Up.
No comments:
Post a Comment