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 Superscript Object
The HTML DOM Superscript Object represents the <sup> element in an HTML document. The superscript element displays text as superscript, which appears half a character above the normal line and is often rendered in a smaller font size. This is commonly used for mathematical exponents, footnote references, and ordinal numbers.
Syntax
Following is the syntax to create a superscript object using JavaScript −
document.createElement("SUP");
Properties
The Superscript object inherits all properties from the generic HTMLElement object, including −
innerHTML − Gets or sets the HTML content inside the superscript element.
textContent − Gets or sets the text content of the superscript element.
style − Allows access to the CSS styling properties of the element.
className − Gets or sets the class attribute of the element.
Creating Superscript Object
You can create a superscript object dynamically using JavaScript's createElement() method. Once created, you can set its content and append it to the document.
Example
Following example demonstrates how to create and manipulate a superscript object −
<!DOCTYPE html>
<html>
<head>
<title>DOM Superscript Object</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h1>DOM Superscript Object Demo</h1>
<p id="demo">E = mc</p>
<button onclick="createSup()" style="padding: 10px 20px; margin: 10px; cursor: pointer;">Add Superscript</button>
<button onclick="removeSup()" style="padding: 10px 20px; margin: 10px; cursor: pointer;">Remove Superscript</button>
<script>
function createSup() {
var para = document.getElementById("demo");
var supElement = document.createElement("SUP");
supElement.innerHTML = "2";
supElement.id = "superscript";
para.appendChild(supElement);
}
function removeSup() {
var supElement = document.getElementById("superscript");
if (supElement) {
supElement.remove();
}
}
</script>
</body>
</html>
The output shows Einstein's famous equation. Clicking "Add Superscript" adds the exponent "2", and clicking "Remove Superscript" removes it −
Before: E = mc After: E = mc² (the "2" appears as superscript)
Mathematical Expressions Example
Superscript is commonly used in mathematical expressions for exponents and formulas.
Example
<!DOCTYPE html>
<html>
<head>
<title>Mathematical Superscript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Mathematical Formulas</h2>
<div id="formulas"></div>
<button onclick="addFormulas()" style="padding: 10px 20px; cursor: pointer;">Generate Formulas</button>
<script>
function addFormulas() {
var container = document.getElementById("formulas");
// Create formula: x² + y² = z²
var formula1 = document.createElement("p");
formula1.innerHTML = "Pythagorean theorem: x";
var sup1 = document.createElement("SUP");
sup1.innerHTML = "2";
formula1.appendChild(sup1);
formula1.innerHTML += " + y";
var sup2 = document.createElement("SUP");
sup2.innerHTML = "2";
formula1.appendChild(sup2);
formula1.innerHTML += " = z";
var sup3 = document.createElement("SUP");
sup3.innerHTML = "2";
formula1.appendChild(sup3);
// Create formula: 2? = 16
var formula2 = document.createElement("p");
formula2.innerHTML = "Power calculation: 2";
var sup4 = document.createElement("SUP");
sup4.innerHTML = "4";
formula2.appendChild(sup4);
formula2.innerHTML += " = 16";
container.appendChild(formula1);
container.appendChild(formula2);
}
</script>
</body>
</html>
The output displays mathematical formulas with proper superscript formatting −
Pythagorean theorem: x² + y² = z² Power calculation: 2? = 16
Accessing Existing Superscript Elements
You can also access and modify existing superscript elements in the document using various DOM methods.
Example
<!DOCTYPE html>
<html>
<head>
<title>Access Superscript Elements</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modify Existing Superscript</h2>
<p>The area of a circle is ?r<sup id="exponent">2</sup></p>
<button onclick="changeExponent()" style="padding: 10px 20px; margin: 5px; cursor: pointer;">Change to Cube</button>
<button onclick="styleExponent()" style="padding: 10px 20px; margin: 5px; cursor: pointer;">Style Exponent</button>
<script>
function changeExponent() {
var supElement = document.getElementById("exponent");
supElement.innerHTML = "3";
}
function styleExponent() {
var supElement = document.getElementById("exponent");
supElement.style.color = "red";
supElement.style.fontWeight = "bold";
}
</script>
</body>
</html>
This example shows how to modify existing superscript content and styling dynamically.
Initial: The area of a circle is ?r² After "Change to Cube": The area of a circle is ?r³ After "Style Exponent": The area of a circle is ?r³ (exponent in red, bold)
Common Use Cases
The superscript element is commonly used in the following scenarios −
Mathematical exponents − x², y³, 2?
Chemical formulas − H?O (though subscript is more common), CO²
Footnote references − This statement needs citation¹
Ordinal numbers − 1??, 2??, 3??
Copyright and trademark symbols − Company Name?
Conclusion
The HTML DOM Superscript Object provides a way to dynamically create and manipulate <sup> elements through JavaScript. It is essential for displaying mathematical formulas, scientific notation, and footnote references where text needs to appear above the normal baseline. The object inherits all standard HTML element properties and methods, making it easy to integrate into dynamic web applications.
191 Views
