JavaScript String sub() Method

What You’ll Learn

String.prototype.sub() is a deprecated HTML wrapper method (same API as MDN String.prototype.sub()). It returns a string that wraps your text in a <sub> tag. Learn what it builds, why wrappers are discouraged, and how to replace them with DOM APIs — with five examples and try-it labs.

Introduction

Early JavaScript included helpers that wrapped text in HTML tags — sub(), sup(), bold(), italics(), and others. They made it easy to inject markup with innerHTML.

Today those wrappers are deprecated. sub() still works in browsers for compatibility. The <sub> element remains valid HTML (subscript for chemistry, footnotes, and math-like text), but you should create it with the DOM — not by concatenating tags as a string.

This page is part of JavaScript String Methods. Related topics include strike() and small().

Understanding the sub() Method

Calling str.sub() does not create a live DOM node and does not take arguments. It concatenates an HTML string: <sub> + text + </sub>.

• It is an instance method on strings (auto-boxed if needed).
• It returns a new string — the original is unchanged.
• No parameters — just str.sub().
• Prefer createElement("sub") for real UI.

📝 Syntax

General form of String.prototype.sub:

str.sub()

Parameters

None.

Return value

A string beginning with a <sub> start tag, then the text of str, then a </sub> end tag.

Common patterns

"2".sub();
// '2'

// Prefer this in new code:
const elem = document.createElement("sub");
elem.textContent = "2";
document.body.appendChild(elem);

Examples Gallery

Examples follow MDN String.sub() patterns. Use View Output or Try It Yourself for each case.

const contentString = "Hello, world";
contentString.sub();
// 'Hello, world'

<sub>Hello, world</sub>

"".sub();           // ''
"A < B".sub();      // 'A < B'
typeof "x".sub();   // "string"

<sub></sub>
<sub>A < B</sub>
string

const contentString = "Hello, world";
const html = contentString.sub();
// document.body.innerHTML = html;  // legacy pattern — avoid in new apps

console.log(html);
// Prefer createElement("sub") instead

<sub>Hello, world</sub>
(prefer createElement — avoid string HTML wrappers)

"2".sub();      // '2'
"Hi".sup();     // 'Hi'  (if available)
"Hi".small();   // 'Hi'
"Hi".strike();  // 'Hi'

// Typical formula idea (legacy string build — avoid in new apps):
"H" + "2".sub() + "O";
// 'H2O'

<sub>2</sub>
<sup>Hi</sup>
<small>Hi</small>
<strike>Hi</strike>
H<sub>2</sub>O

const contentString = "2";
const elem = document.createElement("sub");
elem.textContent = contentString;

// document.body.appendChild(elem);
console.log(elem.tagName);
console.log(elem.outerHTML);

SUB
<sub>2</sub>

🚀 Common Use Cases

• Reading legacy tutorials — recognize HTML wrapper methods in old samples.
• Migrating old scripts — replace sub() with createElement("sub").
• Chemistry / footnotes — use a real <sub> element (not the string method).
• Teaching string immutability — show that methods return new strings.
• Not for new apps — do not use sub() to build subscript markup.
• Not for extracting text — that is slice() / substring(), not sub().

📝 Notes

• sub() is deprecated — standardized only for compatibility.
• The <sub> element is still valid HTML; the string method is not recommended.
• Do not confuse sub() with substr() or substring().
• It returns a string, not a DOM node.
• It takes no parameters.
• Avoid assigning untrusted strings to innerHTML.

💡 Best Practices