JavaScript String italics() Method

What You’ll Learn

String.prototype.italics() is a deprecated HTML wrapper method (same API as MDN String.prototype.italics()). It returns a string that wraps your text in an <i> tag. Learn what it builds, how <i> differs from <em>, and how to replace the wrapper with DOM APIs or CSS — with five examples and try-it labs.

Introduction

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

Today those wrappers are deprecated. italics() may still return a string for compatibility. The <i> element remains valid HTML, but you should create it with the DOM (or use CSS / <em>) — not string methods.

This page is part of JavaScript String Methods. Related topics include bold() and fontsize().

Understanding the italics() Method

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

• It is an instance method on strings (auto-boxed if needed).
• It returns a new string — the original is unchanged.
• No parameters — just str.italics().
• Prefer DOM APIs or CSS font-style for real UI.

📝 Syntax

General form of String.prototype.italics:

str.italics()

Parameters

None.

Return value

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

Common patterns

"Hello, world".italics();
// 'Hello, world'

// Prefer this in new code:
const el = document.createElement("i");
el.textContent = "Hello, world";
// document.body.appendChild(el);

// Or style only (no semantic tag):
// el.style.fontStyle = "italic";

Examples Gallery

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

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

<i>Hello, world</i>

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

<i></i>
<i>A < B</i>
string

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

console.log(html);
// Prefer createElement("i") in new apps

<i>Hello, world</i>
(legacy pattern — prefer createElement instead of string HTML)

"Hi".italics(); // 'Hi'
"Hi".bold();    // 'Hi'
"Hi".big();     // 'Hi'
"Hi".fixed();   // 'Hi'

<i>Hi</i>
<b>Hi</b>
<big>Hi</big>
<tt>Hi</tt>

const contentString = "Hello, world";

const elem = document.createElement("i");
elem.textContent = contentString;
// document.body.appendChild(elem);

console.log(elem.tagName);
console.log(elem.outerHTML);

// Look-only alternative:
const styled = document.createElement("span");
styled.textContent = contentString;
styled.style.fontStyle = "italic";
console.log(styled.style.fontStyle);

I
<i>Hello, world</i>
italic

🚀 Common Use Cases

• Reading legacy tutorials — recognize HTML wrapper methods in old samples.
• Migrating old scripts — replace italics() with createElement() or CSS font-style.
• Teaching string immutability — show that methods return new strings.
• Not for new apps — do not use italics() to build HTML in new apps.
• Semantic emphasis — prefer <em> for stress and CSS for look-only italics.
• Safer markup — prefer textContent + CSS over innerHTML strings.

📝 Notes

• italics() is deprecated — standardized only for compatibility.
• The method is deprecated; the <i> element itself remains valid HTML.
• <i> is for alternate voice/style; <em> marks stress emphasis — pick the right one.
• It returns a string, not a DOM node.
• It takes no parameters.
• Other HTML wrappers (bold(), big(), blink(), …) share the same fate.
• Avoid assigning untrusted strings to innerHTML.

💡 Best Practices