JavaScript document.write
last modified April 2, 2025
In this article, we explore the document.write method in
JavaScript. This method writes directly to the HTML document stream,
allowing developers to output content dynamically.
Basic Definition
The document.write method writes a string of text to a
document stream opened by document.open. When the document
is loading, this method appends content to the document.
After the document has finished loading, calling document.write
will first clear the entire document before writing. This behavior makes
it generally unsuitable for modern web development practices.
Basic document.write
This example demonstrates the simplest use of document.write.
<!DOCTYPE html>
<html>
<head>
<title>Basic document.write</title>
</head>
<body>
<script>
document.write('Hello, World!');
</script>
</body>
</html>
In this basic example, we use document.write to output the
string "Hello, World!" directly into the HTML document. The text appears
where the script tag is placed in the document.
This demonstrates the fundamental usage of document.write to
inject content into a webpage during the initial page load.
Writing HTML Elements
This example shows how to write HTML elements using document.write.
<!DOCTYPE html>
<html>
<head>
<title>Writing HTML Elements</title>
</head>
<body>
<script>
document.write('<h1>Welcome to My Site</h1>');
document.write('<p>This content was generated dynamically.</p>');
</script>
</body>
</html>
Here we use document.write to output complete HTML elements,
including an h1 heading and a paragraph. The browser renders these as
normal HTML elements.
This demonstrates how document.write can be used to generate
structured content. Note that the HTML strings must be properly formatted.
Writing After Page Load
This example demonstrates the effect of calling document.write after page load.
<!DOCTYPE html>
<html>
<head>
<title>After Page Load</title>
</head>
<body>
<h1>Original Content</h1>
<button onclick="writeContent()">Write Content</button>
<script>
function writeContent() {
document.write('<h1>New Content</h1>');
}
</script>
</body>
</html>
In this example, clicking the button triggers document.write
after the page has loaded. This clears the entire document and replaces
it with the new content.
This behavior is why document.write is generally avoided in
modern JavaScript. It can unexpectedly wipe out the entire page content.
Writing Variables
This example shows how to output variable values using document.write.
<!DOCTYPE html>
<html>
<head>
<title>Writing Variables</title>
</head>
<body>
<script>
const userName = 'Alice';
const userAge = 30;
document.write(`<p>Name: ${userName}</p>`);
document.write(`<p>Age: ${userAge}</p>`);
</script>
</body>
</html>
Here we use template literals to insert variable values into strings that
are then written to the document. The variables userName and
userAge are displayed in paragraph elements.
This demonstrates how document.write can incorporate dynamic
data into the page content during the initial page load.
Conditional Writing
This example demonstrates conditional content writing with document.write.
<!DOCTYPE html>
<html>
<head>
<title>Conditional Writing</title>
</head>
<body>
<script>
const isMorning = new Date().getHours() < 12;
if (isMorning) {
document.write('<h2>Good Morning!</h2>');
} else {
document.write('<h2>Good Afternoon!</h2>');
}
</script>
</body>
</html>
In this example, we check the current time and use document.write
to output a different greeting based on whether it's morning or afternoon.
This shows how document.write can be used with conditional
logic to create dynamic content during page load. The greeting changes
based on the time of day.
Source
MDN document.write Documentation
In this article, we have shown how to use document.write
in JavaScript. While useful for simple cases, modern web development
typically prefers DOM manipulation methods for better control.
Author
List all JS DOM tutorials.