document.open() is an instance method that opens a document for writing (see MDN Document: open()). Learn the classic open() → write() → close() stream, destructive side effects, the three-argument Window.open alias, and safer modern alternatives.
Instance method
None (usual)
Document
write / close
Clears page
Baseline
Before modern DOM APIs, many scripts built entire pages with a document stream:
document.open() — start a new input stream (replaces the document).document.write(...) — push HTML strings into that stream.document.close() — finish the stream so the browser can complete parsing.MDN: Document.open() opens a document for writing. That sounds simple — but it has strong side effects.
Calling open() removes all event listeners currently registered on the document, nodes inside it, or the document’s window — and removes all existing nodes from the document.
Never run open/write/close on the current tutorial page. Use iframe.contentDocument so only the preview is replaced.
Related tutorials: close(), clear(), prepend(), parseHTML().
document.open()An instance method on the Document interface for dynamic markup insertion (MDN / HTML).
open() with no parameters (MDN).document.write() after load can call open() for you (MDN Notes).Usual form of Document.open (MDN):
open()None for the standard writing form (MDN).
A Document object instance (MDN).
document.open();
document.write("<p>Hello world!</p>");
document.write("<p>I am a fish</p>");
document.write("<p>The number is 42</p>");
document.close();const frame = document.getElementById("preview");
const doc = frame.contentDocument;
doc.open();
doc.write("<!DOCTYPE html><title>Preview</title><p>Hello from stream</p>");
doc.close();document.open() forms (MDN)MDN: a lesser-known three-argument version is an alias of Window.open(). Example opens GitHub in a new window with opener set to null:
document.open("https://www.github.com", "", "noopener=true");Prefer calling window.open(...) explicitly so readers are not confused with the document-stream API.
MDN: browsers used to support document.open(type, replace) (MIME type + optional "replace" history behavior). That form is obsolete. It does not throw; it forwards to no-arg document.open(). History replacement now always happens.
| Goal | Code |
|---|---|
| Start stream | document.open() |
| Full pattern | open(); write(...); close(); |
| Safe demo target | iframe.contentDocument.open() |
| Return value | Document instance |
| Open a window | window.open(url, name, features) (prefer over 3-arg document.open) |
| MDN status | Baseline Widely available |
Four facts about document.open().
start streamfor write
DocumentMDN
nodes+eventsMDN
close()after write
| Goal | Legacy stream | Modern approach |
|---|---|---|
| Replace iframe content | doc.open/write/close | iframe.srcdoc = "..." |
| Build UI from data | document.write | Create elements / templates |
| Parse HTML string | write into stream | Document.parseHTML() / DOMParser |
| Open a new tab | 3-arg document.open | window.open |
Examples follow MDN Document: open(). Try-it labs use an iframe so the editor page is not replaced.
Open a stream, write markup, then close.
Replace iframe content with several HTML fragments.
const doc = document.getElementById("preview").contentDocument;
doc.open();
doc.write("<p>Hello world!</p>");
doc.write("<p>I am a fish</p>");
doc.write("<p>The number is 42</p>");
doc.close();open() clears and starts the stream; write() adds markup; close() finishes it (MDN).
MDN: open() returns a Document instance.
const doc = document.getElementById("preview").contentDocument;
const opened = doc.open();
console.log(opened === doc); // true in normal cases
opened.write("<p>Returned document</p>");
opened.close();You can chain from the returned document, but most code just reuses doc.
See what open clears, and prefer modern APIs when possible.
MDN: all existing nodes are removed from the document.
const doc = document.getElementById("preview").contentDocument;
doc.open();
doc.write("<p id='old'>Old content</p>");
doc.close();
const before = !!doc.getElementById("old");
doc.open(); // clears previous nodes
const afterOpen = !!doc.getElementById("old");
doc.write("<p>New content</p>");
doc.close();
console.log({ before, afterOpen });Treat open() as a full document reset for that browsing context’s document content and listeners (MDN).
MDN Notes: writing after the page has loaded triggers an automatic open().
// Conceptual note (do this on an iframe in demos):
const doc = document.getElementById("preview").contentDocument;
// Explicit is clearer for beginners:
doc.open();
doc.write("<p>Explicit open</p>");
doc.close();
// After a document is fully loaded, a lone write() may open implicitly (MDN).
// Prefer always calling open() yourself so the stream is intentional.Implicit open surprises beginners because it also clears the document. Make open() explicit.
srcdocFor iframe previews, skip the stream APIs.
const frame = document.getElementById("preview");
frame.srcdoc = "<!DOCTYPE html><title>Preview</title><p>Hello without open/write/close</p>";Learn open() for legacy literacy; prefer srcdoc, createElement, or parseHTML() for new work.
contentDocument.document.write wipes a page (MDN Notes).window.open rather than 3-arg document.open.document.open() Starts a Streamdocument.open()Opens the document for writing (MDN).
Nodes and listeners are removed (MDN side effects).
Push HTML fragments into the open document.
See the document.close() tutorial.
open() can occur when write() runs after load.Window.open().Document.open() is Baseline Widely available on MDN. Logos use the shared browser-image-sprite.png sprite from this project.
Opens a document for writing and starts the classic open/write/close stream — widely supported.
Bottom line: Supported across modern browsers. Prefer DOM APIs or iframe.srcdoc for new UI code; use open/write/close when maintaining stream-based scripts.
document.open() starts a document input stream for document.write(), clearing existing nodes and listeners in the process. Always finish with document.close(), practice on an iframe, and prefer modern DOM / srcdoc for new apps.
Continue with close(), parseHTML(), or the JavaScript hub.
open() → write() → close() as one unitiframe.contentDocument, not the live pagesrcdoc or DOM APIs for new iframe previewswindow.open for new windows/tabsopen() on the current page by accidentopen() with window.open()document.writeclose() after writingdocument.open()Start a write stream — and know the cost.
Document
MDNnodes+events
MDNwrite+close
streamWindow.open
aliasBaseline
MDNMDN notes that a late document.write() after the page has loaded can automatically call document.open() — which is why a stray write() can wipe an entire page and look like a mysterious bug.
Learn how Document.prepend() inserts nodes or strings before the first child of a Document.
6 people found this page helpful