Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Span object
The HTML DOM Span object represents the HTML <span> element in the Document Object Model. The <span> element is an inline container used to group text or other inline elements for styling or scripting purposes. We can create new span elements dynamically using JavaScript or access existing ones to manipulate their content and properties.
Syntax
Following is the syntax for creating a span object −
var spanElement = document.createElement("SPAN");
Following is the syntax for accessing an existing span object by ID −
var spanElement = document.getElementById("spanId");
Following is the syntax for accessing span elements by tag name −
var spanElements = document.getElementsByTagName("SPAN");
Creating a Span Object
You can create a new span element dynamically using the createElement() method. Once created, you can add text content, apply styles, and append it to the DOM.
Example
Following example demonstrates how to create a span element dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Creating Span Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Span Object Example</h1>
<p>Create a span element by clicking the below button</p>
<button onclick="createSpan()">CREATE SPAN</button>
<p>This is some text inside a p element</p>
<div id="container"></div>
<script>
function createSpan() {
var s = document.createElement("SPAN");
var txt = document.createTextNode("This is some text inside the span element");
s.appendChild(txt);
s.style.backgroundColor = "yellow";
s.style.padding = "5px";
s.style.margin = "10px";
s.style.border = "1px solid #ccc";
document.getElementById("container").appendChild(s);
}
</script>
</body>
</html>
The output shows the button that creates a styled span element when clicked −
Span Object Example Create a span element by clicking the below button [CREATE SPAN] This is some text inside a p element (After clicking: A highlighted span with yellow background appears)
Accessing an Existing Span Object
You can access existing span elements using various DOM methods like getElementById(), getElementsByTagName(), or querySelector().
Example
Following example shows how to access and modify an existing span element −
<!DOCTYPE html>
<html>
<head>
<title>Accessing Span Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Accessing Span Elements</h1>
<p>Original span: <span id="mySpan" style="color: blue;">This is blue text</span></p>
<button onclick="modifySpan()">MODIFY SPAN</button>
<button onclick="resetSpan()">RESET SPAN</button>
<script>
function modifySpan() {
var span = document.getElementById("mySpan");
span.innerHTML = "This text has been modified!";
span.style.color = "red";
span.style.fontWeight = "bold";
span.style.backgroundColor = "lightyellow";
}
function resetSpan() {
var span = document.getElementById("mySpan");
span.innerHTML = "This is blue text";
span.style.color = "blue";
span.style.fontWeight = "normal";
span.style.backgroundColor = "transparent";
}
</script>
</body>
</html>
The output demonstrates accessing and modifying span properties −
Accessing Span Elements Original span: This is blue text (in blue) [MODIFY SPAN] [RESET SPAN] (After clicking MODIFY: "This text has been modified!" in bold red with yellow background) (After clicking RESET: Returns to original blue text)
Span Object Properties
The Span object inherits all properties from the HTML Element interface. Some commonly used properties include −
| Property | Description |
|---|---|
innerHTML |
Sets or returns the HTML content inside the span element |
textContent |
Sets or returns the text content of the span element |
style |
Sets or returns the CSS style properties of the span element |
className |
Sets or returns the CSS class name of the span element |
id |
Sets or returns the id attribute of the span element |
Working with Multiple Span Elements
Example
Following example demonstrates working with multiple span elements −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Span Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Working with Multiple Spans</h1>
<p>Paragraph with multiple spans:
<span class="highlight">First span</span>,
<span class="highlight">Second span</span>,
<span class="highlight">Third span</span>
</p>
<button onclick="highlightSpans()">HIGHLIGHT ALL</button>
<button onclick="clearHighlight()">CLEAR HIGHLIGHT</button>
<script>
function highlightSpans() {
var spans = document.getElementsByClassName("highlight");
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "yellow";
spans[i].style.padding = "2px 4px";
spans[i].style.border = "1px solid orange";
}
}
function clearHighlight() {
var spans = document.getElementsByClassName("highlight");
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "transparent";
spans[i].style.padding = "0";
spans[i].style.border = "none";
}
}
</script>
</body>
</html>
This example shows how to manipulate multiple span elements simultaneously using getElementsByClassName() method −
Working with Multiple Spans Paragraph with multiple spans: First span, Second span, Third span [HIGHLIGHT ALL] [CLEAR HIGHLIGHT] (After clicking HIGHLIGHT ALL: All spans get yellow background with orange borders)
Conclusion
The HTML DOM Span object provides a versatile way to manipulate inline content dynamically. You can create new span elements using createElement(), access existing ones with various DOM methods, and modify their content, styling, and attributes through JavaScript. Span elements are particularly useful for applying specific styles or behaviors to portions of text within larger content blocks.
2K+ Views
