JavaScript String sup() Method

What You’ll Learn

String.prototype.sup() is a deprecated HTML wrapper method (same API as MDN String.prototype.sup()). It returns a string that wraps your text in a <sup> 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 — sup(), sup(), bold(), italics(), and others. They made it easy to inject markup with innerHTML.

Today those wrappers are deprecated. sup() still works in browsers for compatibility. The <sup> element remains valid HTML (superscript for exponents, 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 sub() and small().

Understanding the sup() Method

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

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

📝 Syntax

General form of String.prototype.sub:

str.sup()

Parameters

None.

Return value

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

Common patterns

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

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

Examples Gallery

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

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

<sup>Hello, world</sup>

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

<sup></sup>
<sup>A < B</sup>
string

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

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

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

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

// Typical formula idea (legacy string build — avoid in new apps):
"x" + "2".sup();
// 'x2'

<sup>2</sup>
<sub>2</sub>
<small>Hi</small>
<strike>Hi</strike>
x<sup>2</sup>

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

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

SUB
<sup>2</sup>

🚀 Common Use Cases

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

📝 Notes

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

💡 Best Practices