Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use JavaScript to replace the content of a document with JavaScript?
In this tutorial, we will learn how to use JavaScript to replace the entire content of an HTML document. JavaScript provides three document methods that work together to achieve this: open(), write(), and close().
The Three Methods
-
document.open() ? Opens a new document stream for writing. It takes two optional parameters: the MIME type (typically "text/html") and "replace" to replace the current document's history entry.
-
document.write() ? Writes content to the document stream. You can pass HTML content as a string to this method.
-
document.close() ? Closes the document stream and renders the content to the page.
Syntax
document.open("text/html", "replace");
document.write("HTML content here");
document.close();
Example 1: Simple Content Replacement
This example replaces the entire document with a simple paragraph:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to replace this content.</p>
<button onclick="replaceContent()">Replace Document</button>
<script>
function replaceContent() {
document.open("text/html", "replace");
document.write("<p>This is the completely new document content!</p>");
document.close();
}
</script>
</body>
</html>
When you click the button, the entire page content will be replaced with just the new paragraph.
Example 2: Complex HTML Replacement
This example shows how to replace the document with more complex HTML content:
<!DOCTYPE html>
<html>
<body>
<h1>Original Document</h1>
<p>This content will be replaced.</p>
<button onclick="replaceWithComplexContent()">Replace with Complex HTML</button>
<script>
function replaceWithComplexContent() {
var newHTML = "<!DOCTYPE html>" +
"<html><head><title>New Document</title></head>" +
"<body>" +
"<h2>Brand New Document</h2>" +
"<p>This is completely new content with <strong>formatting</strong>.</p>" +
"<ul><li>Item 1</li><li>Item 2</li></ul>" +
"</body></html>";
document.open("text/html", "replace");
document.write(newHTML);
document.close();
}
</script>
</body>
</html>
This example creates a complete new HTML document with headers, formatted text, and a list.
How It Works
The process follows these steps:
-
document.open()clears the current document and prepares it for new content -
document.write()adds the new HTML content to the document stream -
document.close()finalizes the document and triggers rendering
Important Notes
Complete Replacement: This method replaces the entire document, not just specific elements.
Browser History: Using "replace" parameter prevents the replaced content from being added to browser history.
Modern Alternatives: For partial content updates, consider using
innerHTMLor DOM manipulation methods instead.
Conclusion
The combination of document.open(), document.write(), and document.close() provides a way to completely replace a document's content. While useful for specific scenarios, modern web development often favors DOM manipulation for better performance and maintainability.
3K+ Views
