JavaScript String anchor() Method

What You’ll Learn

String.prototype.anchor() is a deprecated HTML wrapper method (same API as MDN String.prototype.anchor()). It returns a string that wraps your text in an <a name="..."> tag. Learn what it builds, why that markup is obsolete, and how to replace it with document.createElement() — with five examples and try-it labs.

Introduction

Early JavaScript included several helpers that turned a string into an HTML snippet — bold(), italics(), anchor(), and others. They made it easy to inject markup with innerHTML.

Today those wrappers are deprecated. anchor() still works in browsers for compatibility, but the HTML it produces is no longer valid: the name attribute is not allowed on <a> anymore.

This page is part of JavaScript String Methods. Related topics include String constructor and length.

Understanding the anchor() Method

Calling str.anchor(name) does not create a live DOM node. It concatenates an HTML string: an opening <a name="..."> tag, the original text, and a closing </a>.

• It is an instance method on strings (auto-boxed if needed).
• It returns a new string — the original is unchanged.
• Double quotes inside name become ".
• Prefer DOM APIs for real elements in the page.

📝 Syntax

General form of String.prototype.anchor:

str.anchor(name)

Parameters

• name — a string (or value coerced to string) used as the name attribute in the generated <a> start tag.

Return value

A string beginning with <a name="..."> (quotes in name escaped as "), then the text of str, then </a>.

Common patterns

"Hello, world".anchor("hello");
// 'Hello, world'

"Title".anchor('section"1');
// 'Title'

// Prefer this in new code:
const elem = document.createElement("a");
elem.id = "hello";
elem.textContent = "Hello, world";

Examples Gallery

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

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

<a name="hello">Hello, world</a>

"Title".anchor('section"1');
// 'Title'

<a name="section&quot;1">Title</a>

"A".anchor(123);     // 'A'
"A".anchor(true);    // 'A'
"".anchor("empty");  // ''

<a name="123">A</a>
<a name="true">A</a>
<a name="empty"></a>

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

console.log(html);
// Warning:  is invalid in modern HTML

<a name="hello">Hello, world</a>
(invalid modern markup — name is not allowed on <a>)

const contentString = "Hello, world";
const elem = document.createElement("a");
elem.id = "hello";
elem.textContent = contentString;
elem.href = "#hello";

// document.body.appendChild(elem);
console.log(elem.outerHTML);
// 'Hello, world'

<a id="hello" href="#hello">Hello, world</a>

🚀 Common Use Cases

• Reading legacy tutorials — recognize HTML wrapper methods in old samples.
• Migrating old scripts — replace anchor() with DOM creation.
• Teaching string immutability — show that methods return new strings.
• Not for new apps — do not use anchor() to build navigation.
• In-page links today — set id on a heading and link with href="#id".
• Safer markup — prefer textContent / DOM APIs over innerHTML strings.

📝 Notes

• anchor() is deprecated — standardized only for compatibility.
• The generated name attribute on <a> is not valid in modern HTML.
• It returns a string, not a DOM node.
• Other HTML wrappers (big(), blink(), bold(), fixed(), …) share the same fate.
• Use id + fragment links for in-page navigation.
• Avoid assigning untrusted strings to innerHTML.

💡 Best Practices