What You’ll Learn

document.write() is a Deprecated instance method that writes one or more HTML strings (or TrustedHTML values) into a document stream opened by document.open() (see MDN Document: write()). Learn the classic open() → write() → close() pattern, post-load wipe risks, XSS / Trusted Types notes, safer alternatives, and five iframe-based try-it labs.

Introduction

Early web scripts often built pages by writing HTML into a document stream:

1. document.open() — start (and often clear) the stream.
2. document.write(...) — push markup strings into that stream.
3. document.close() — finish writing so parsing can complete.

MDN: write() writes text in one or more TrustedHTML or string parameters to a document stream opened by document.open().

Related tutorials: open(), close(), createElement(), clear().

Understanding document.write()

An instance method on Document (dynamic markup insertion).

• Parameters — one or more markup strings or TrustedHTML values (MDN).
• Return value — undefined (MDN).
• Stream — writes into a stream opened by document.open() (MDN).
• After load — a lone write() may call open() automatically and clear the document (MDN Notes on open()).
• Injection sink — parses HTML; XSS risk if input is untrusted (MDN).
• Trusted Types — when enforced, strings can throw TypeError unless a policy creates TrustedHTML (MDN).
• Status — Deprecated; strongly discouraged (MDN).

📝 Syntax

General forms of Document.write (MDN):

write(markup)
write(markup, markup2)
write(markup, markup2, /* …, */ markupN)

Parameters

• markup, …, markupN — TrustedHTML or string objects containing the text to write to the document (MDN).

Return value

None (undefined) (MDN).

Exceptions

• TypeError — a string is passed when Trusted Types are enforced and no default policy exists for creating TrustedHTML (MDN).

Classic stream pattern

const doc = iframe.contentDocument;
doc.open();
doc.write("
Hello world!
");
doc.write("
I am a fish
");
doc.close();

⚖️ write() vs modern DOM updates

Examples Gallery

Examples follow MDN Document: write() and the related open/close stream. Prefer iframe demos.

const doc = document.getElementById("preview").contentDocument;
doc.open();
doc.write("
Hello world!
");
doc.write("
I am a fish
");
doc.write("
The number is 42
");
doc.close();
console.log("paragraphs:", doc.querySelectorAll("p").length);

paragraphs: 3
(iframe shows three paragraphs)

const doc = document.getElementById("preview").contentDocument;
const one = "
Out with the old
";
const two = "
in with the new!
";

doc.open();
doc.write(one, two);
doc.close();

iframe shows an h1 and a paragraph

<script>
  document.write("<h1>Main title</h1>");
</script>

Main title appears where the script ran (legacy pattern)

const doc = document.getElementById("preview").contentDocument;
doc.open();
doc.write("
Original iframe content
");
doc.close();

// Later, after that document is loaded:
document.getElementById("wipe").addEventListener("click", () => {
  // Calling write on a loaded document can open() and replace it (MDN).
  doc.write("
Replaced via late write()
");
  doc.close();
});

Original content disappears; only the late write remains

const host = document.getElementById("host");
host.replaceChildren();

const h1 = document.createElement("h1");
h1.textContent = "Out with the old";
const p = document.createElement("p");
p.textContent = "in with the new!";
host.append(h1, p);

host shows heading + paragraph without document.write

🚀 Common Use Cases

• Legacy literacy — recognize Deprecated stream APIs in old scripts (MDN).
• Iframe previews — rebuild a sandbox document with open/write/close for demos.
• Explaining auto-open — teach why late write() wipes pages.
• Trusted Types training — show write as an HTML injection sink (MDN).
• Not for production UI — MDN strongly discourages new use.
• Migration target — replace with createElement / append / frameworks.

📝 Notes

• MDN: marked Deprecated; use is strongly discouraged.
• Not marked Experimental or Non-standard on MDN, but still unsuitable for new products.
• Late write() can auto-open() and clear the document.
• HTML injection sink — XSS risk; prefer TrustedHTML when Trusted Types are enforced (MDN).
• Practice on iframe.contentDocument, never on the live tutorial page.
• Related: open(), close(), createElement(), replaceChildren().

💡 Best Practices