JavaScript Document clear() Method

What You’ll Learn

document.clear() is a deprecated instance method on the page’s Document object (see MDN Document: clear()). MDN states it does nothing and returns undefined. Learn why it still exists, what developers used to expect, and how to clear DOM content with modern APIs — with five examples and try-it labs.

Introduction

When you read legacy JavaScript tutorials or maintain old codebases, you may encounter document.clear(). The name suggests it wipes the page clean — but MDN is explicit: the method does nothing today and never raises an error.

In the early web (Netscape 4 era), developers used document.clear() together with document.write() to replace page content dynamically. Modern browsers keep the method as a silent no-op so ancient scripts do not crash.

Related tutorials: append(), removeChild(), textContent.

Understanding document.clear()

An instance method on the active document object. Defined in the HTML specification as a legacy compatibility feature (MDN).

• Parameters — none (MDN).
• Return value — undefined (MDN).
• Side effect — none in modern browsers; silent no-op (MDN).
• Errors — does not throw when called (MDN).
• Modern replacement — element.replaceChildren() to empty a node.
• Status — deprecated; avoid in new code (MDN).

📝 Syntax

General form of Document.clear (MDN):

clear()

Parameters

None (MDN).

Return value

undefined (MDN).

Modern alternatives

// Preferred: remove all children without parsing HTML
document.body.replaceChildren();

// Simple: assign empty HTML string (re-parses markup)
document.body.innerHTML = "";

// Loop: remove one child at a time (older pattern)
while (document.body.firstChild) {
  document.body.removeChild(document.body.firstChild);
}

// Frame / document stream (different use case — not clear())
document.open();
document.write("<h1>New content</h1>");
document.close();

⚖️ clear() vs modern DOM clearing

Examples Gallery

Examples follow MDN Document: clear() and show why the method is a no-op plus modern replacements.

const before = document.body.childElementCount;

document.clear(); // MDN: does nothing

const after = document.body.childElementCount;

console.log({ before, after, same: before === after });
// { before: N, after: N, same: true }

{ before: 3, after: 3, same: true }

const result = document.clear();

console.log(result);        // undefined
console.log(result === undefined); // true

undefined
true

const list = document.getElementById("items");

console.log("Before:", list.childElementCount); // e.g. 3

list.replaceChildren(); // removes all children

console.log("After:", list.childElementCount);  // 0

Before: 3
After: 0

const panel = document.getElementById("panel");

panel.innerHTML = "<p>Loaded</p><button>Go</button>";
console.log(panel.childElementCount); // 2

panel.innerHTML = "";
console.log(panel.childElementCount); // 0

2
0

/** Replace deprecated document.clear() in legacy scripts */
function clearContainer(element) {
  if (element.replaceChildren) {
    element.replaceChildren();
  } else {
    element.innerHTML = "";
  }
}

// Old (deprecated — no effect):
// document.clear();

// New:
clearContainer(document.body);

(body children removed — replaceChildren used)

🚀 Common Use Cases

• Reading legacy code — understand why an old script calls clear() but the page never changes.
• Maintenance audits — find and replace deprecated calls during refactors.
• Teaching DOM history — contrast Netscape-era patterns with modern APIs.
• Not for SPAs — use replaceChildren() on the container you control.
• Not for security — clearing DOM does not remove cookies, storage, or service workers.
• Full page reset — prefer location.reload() or client-side routing, not document.clear().

📝 Notes

• MDN: Deprecated — not recommended for new code.
• MDN: method does nothing and does not raise an error.
• Do not confuse with console.clear() (clears the devtools console).
• Do not confuse with CanvasRenderingContext2D.clearRect() (clears pixels).
• document.open() + document.write() is a different legacy document-stream pattern.
• Related: append(), removeChild(), textContent.

💡 Best Practices