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
How to change string to be displayed as a superscript using JavaScript?
In this tutorial, we will learn how to display strings as superscript using JavaScript and HTML. Superscript text appears raised above the normal text baseline, making it smaller and positioned at half-height. This is commonly used in mathematical formulas like A2, B3, or scientific notations like 105.
Superscript is essential for writing mathematical expressions, chemical formulas (like H2O+), and footnote references in web content.
Using HTML <sup> Tag
The simplest way to create superscript text is using the HTML <sup> tag. Any text inside this tag will automatically display as superscript.
Syntax
<p>10<sup>2</sup> = 100</p>
Example
<html> <head> <title>Superscript Examples</title> </head> <body> <h2>Mathematical Formulas with Superscript</h2> <p>A<sup>3</sup> (A cubed)</p> <p>A<sup>2</sup> + B<sup>2</sup> + 2*A*B = (A+B)<sup>2</sup></p> <p>E = mc<sup>2</sup></p> <p>x<sup>n</sup> + y<sup>n</sup> = z<sup>n</sup></p> </body> </html>
Using JavaScript String.sup() Method (Deprecated)
JavaScript provides the String.sup() method to wrap text in <sup> tags. However, this method is deprecated and should be avoided in modern development.
Syntax
string.sup() // Returns: <sup>string</sup>
Example with sup() Method
<html>
<head>
<title>JavaScript Superscript</title>
</head>
<body>
<h2>Using JavaScript to Create Superscript</h2>
<div id="output"></div>
<div id="warning" style="color: red; margin-top: 20px;"></div>
</body>
<script>
var output = document.getElementById("output");
var warning = document.getElementById("warning");
// Using deprecated sup() method
let base = "10";
let exponent = "5";
let formula = base + exponent.sup() + " = " + Math.pow(10, 5);
output.innerHTML = formula + "<br>";
output.innerHTML += "5" + "2".sup() + " = " + Math.pow(5, 2) + "<br>";
// Warning about deprecation
warning.innerHTML = "<strong>Warning:</strong> The String.sup() method is deprecated. Use <sup> tag instead.";
</script>
</html>
Modern Approach: Creating Superscript with JavaScript
Instead of using the deprecated sup() method, create superscript elements dynamically using modern DOM methods.
<html>
<head>
<title>Modern Superscript Creation</title>
</head>
<body>
<h2>Dynamic Superscript with JavaScript</h2>
<div id="mathFormulas"></div>
<button onclick="addFormula()">Add New Formula</button>
</body>
<script>
function createSuperscript(base, exponent) {
let container = document.createElement('span');
container.textContent = base;
let sup = document.createElement('sup');
sup.textContent = exponent;
container.appendChild(sup);
return container;
}
function addFormula() {
let container = document.getElementById('mathFormulas');
let p = document.createElement('p');
// Create x^2 + y^2 = z^2
p.appendChild(createSuperscript('x', '2'));
p.appendChild(document.createTextNode(' + '));
p.appendChild(createSuperscript('y', '2'));
p.appendChild(document.createTextNode(' = '));
p.appendChild(createSuperscript('z', '2'));
container.appendChild(p);
}
// Add initial formula
addFormula();
</script>
</html>
Comparison of Methods
| Method | Status | Recommended | Use Case |
|---|---|---|---|
| HTML <sup> tag | Standard | Yes | Static content, direct HTML writing |
| String.sup() | Deprecated | No | Legacy code only |
| DOM createElement | Modern Standard | Yes | Dynamic content generation |
Key Points
- Always prefer HTML
<sup>tag for static superscript content - Use DOM methods like
createElement()for dynamic superscript generation - Avoid the deprecated
String.sup()method in new projects - Superscript is essential for mathematical formulas, chemical equations, and footnotes
Conclusion
The HTML <sup> tag remains the best approach for creating superscript text. For dynamic content, use modern DOM methods rather than deprecated string methods to ensure future compatibility.
3K+ Views
