JavaScript String bold() Method

What You’ll Learn

String.prototype.bold() is a deprecated HTML wrapper method (same API as MDN String.prototype.bold()). It returns a string that wraps your text in a <b> tag. Learn what it builds, how <b> differs from <strong>, 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 — bold(), big(), blink(), italics(), and others. They made it easy to inject markup with innerHTML.

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

This page is part of JavaScript String Methods. Related topics include blink() and big().

Understanding the bold() Method

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

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

📝 Syntax

General form of String.prototype.bold:

str.bold()

Parameters

None.

Return value

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

Common patterns

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

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

Examples Gallery

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

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

<b>Hello, world</b>

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

<b></b>
<b>A < B</b>
string

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

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

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

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

<b>Hi</b>
<big>Hi</big>
<blink>Hi</blink>
<i>Hi</i>

const contentString = "Hello, world";
const elem = document.createElement("b");
elem.textContent = contentString;

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

B
<b>Hello, world</b>

🚀 Common Use Cases

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

📝 Notes

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

💡 Best Practices