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 subscript using JavaScript?
In this tutorial, we will learn to display strings as subscripts using JavaScript. A subscript is text that appears smaller and positioned below the baseline of normal text. For example, in H2O, the "2" is a subscript.
Subscripts are commonly used in mathematics (X1, Y2), chemistry (CO2, H2SO4), and scientific notation. Here, we'll explore both HTML and JavaScript methods to create subscripts.
Using HTML <sub> Tag
The simplest way to create subscripts is using the HTML <sub> tag. Any text inside this tag will be displayed as a subscript.
Syntax
<p>Water is H<sub>2</sub>O</p>
Example
<html>
<head>
<title>Subscript Examples</title>
</head>
<body>
<h2>Chemical Formulas with Subscripts</h2>
<p>Water: H<sub>2</sub>O</p>
<p>Carbon Dioxide: CO<sub>2</sub></p>
<p>Glucose: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>
<p>Mathematical: X<sub>1</sub> + X<sub>2</sub> = Y</p>
</body>
</html>
Using JavaScript to Create Subscripts
JavaScript can dynamically create subscript text using DOM manipulation. This is useful when you need to generate formulas programmatically.
Method 1: Using innerHTML
<html>
<head>
<title>JavaScript Subscripts</title>
</head>
<body>
<h2>Dynamic Subscripts with JavaScript</h2>
<div id="formulas"></div>
<script>
const formulasDiv = document.getElementById('formulas');
// Create chemical formulas dynamically
const chemicals = [
{ name: 'Water', formula: 'H<sub>2</sub>O' },
{ name: 'Sulfuric Acid', formula: 'H<sub>2</sub>SO<sub>4</sub>' },
{ name: 'Methane', formula: 'CH<sub>4</sub>' }
];
chemicals.forEach(chemical => {
formulasDiv.innerHTML += `<p>${chemical.name}: ${chemical.formula}</p>`;
});
</script>
</body>
</html>
Method 2: Creating Elements Programmatically
<html>
<head>
<title>Creating Subscript Elements</title>
</head>
<body>
<h2>Creating Subscripts with createElement</h2>
<div id="output"></div>
<script>
function createFormula(mainText, subscriptText) {
const span = document.createElement('span');
span.textContent = mainText;
const sub = document.createElement('sub');
sub.textContent = subscriptText;
span.appendChild(sub);
return span;
}
const output = document.getElementById('output');
// Create H?O formula
const waterFormula = document.createElement('p');
waterFormula.appendChild(document.createTextNode('Water: '));
waterFormula.appendChild(createFormula('H', '2'));
waterFormula.appendChild(document.createTextNode('O'));
output.appendChild(waterFormula);
// Create mathematical expression
const mathExpression = document.createElement('p');
mathExpression.appendChild(document.createTextNode('Variables: '));
mathExpression.appendChild(createFormula('X', '1'));
mathExpression.appendChild(document.createTextNode(' + '));
mathExpression.appendChild(createFormula('X', '2'));
output.appendChild(mathExpression);
</script>
</body>
</html>
Comparison of Methods
| Method | Ease of Use | Dynamic Content | Best For |
|---|---|---|---|
| HTML <sub> tag | Very Easy | No | Static content |
| innerHTML | Easy | Yes | Dynamic HTML strings |
| createElement | Moderate | Yes | Complex DOM manipulation |
Important Notes
Deprecated Method: The JavaScript string.sub() method is deprecated and should not be used. It's not part of modern JavaScript standards.
Accessibility: When using subscripts, consider screen reader compatibility. The HTML <sub> tag is properly recognized by assistive technologies.
Conclusion
Use the HTML <sub> tag for static subscripts and JavaScript DOM methods for dynamic content. Avoid the deprecated string.sub() method in favor of proper HTML structure.
3K+ Views
