javascript

document.write() method

Learn what the JavaScript document.write() method does, why it's rarely used in modern web development, and safer alternatives to modify your web page content.

10 min read 8 sections Tutorial

The `document.write()` method is a way to add content directly into an HTML document using JavaScript. It changes what appears on your web page. While it seems simple, this method has big limitations and is almost never used in new web projects today. You will learn what `document.write()` does and why you should use other methods instead.

document.write() method

The document.write() method is a JavaScript command. It lets you write HTML content directly into your web page. When your browser loads an HTML page, it reads the HTML code line by line. If it finds a document.write() command, it adds the text or HTML you tell it to right at that spot.

This method was common a long time ago. Now, better ways exist to change what is on your web page. Understanding document.write() helps you see how web pages are built and why modern methods are much better.

What is document.write()?

The document.write() method is a JavaScript function that writes a string of text or HTML directly into the HTML document stream as the page is loading.

Adds Content

It adds text or HTML code directly into your web page's content.

During Page Load

It works best when the page is still loading, putting content in place as the browser builds the page.

Rarely Used

Modern web development avoids it due to its unpredictable behavior and potential to overwrite the page.

Better Alternatives

Methods like innerHTML or appendChild are safer and more flexible for changing page content.

Using document.write() for the First Time

Getting Started

Using document.write() for the First Time

To use document.write(), you simply call the method and pass it a string of text. This string can be plain text or even full HTML tags. The browser will then insert this content into the document at the exact place where your script runs.

This works because the browser processes HTML from top to bottom. When it hits your JavaScript code with document.write(), it pauses, adds the content, and then continues building the rest of the page.

JS · BrowserWriting simple text and HTML with document.write()

1// This script runs as the page loads.
2// It will write a greeting directly into the HTML document.
3document.write("Hello, ChilluCoder! ");
4
5// You can also write HTML tags.
6// The browser will create a heading and paragraph.
7document.write("<h1>Welcome</h1>");
8document.write("<p>This text was added by JavaScript.</p>");
9
10// Remember to use proper HTML syntax inside the quotes.

The Big Problem: Overwriting Your Page

If you use document.write() after your web page has fully loaded, it will erase everything on the page and replace it with the new content. This is almost never what you want. It can make your website disappear!

How document.write() Works

When your browser loads a web page, it creates something called the Document Object Model (DOM). This is like a tree structure that represents all the HTML elements on your page. document.write() works directly with the initial stream of HTML that builds this DOM.

If document.write() runs while the browser is still building the page, it adds content to this stream. If it runs after the page is finished and the DOM is complete, it tells the browser to open a new document stream. This action clears the old page and starts fresh, which wipes away all your existing content.

JS · BrowserInjecting HTML structure using document.write()

1// This script adds a new section to the page.
2// It runs before the page is fully displayed.
3document.write("<h2>My Dynamic Section</h2>");
4document.write("<p>Here is some content for my new section.</p>");
5
6// We can even add styles or other elements.
7document.write("<style>h2 { color: blue; }</style>");
8document.write("<ul><li>Item 1</li><li>Item 2</li></ul>");
9
10// All this content will appear in the order it is written.

✗ BadWrong — Overwrites Page

<!-- HTML already loaded -->
<button onclick="document.write('Page is now empty!');">
  Click Me
</button>

✓ GoodCorrect — During Page Load

<!-- HTML page starts here -->
<script>
  document.write('<h1>This content loads first!</h1>');
</script>
<!-- Rest of HTML loads after this -->

When (and When Not) to Use document.write()

You should almost never use document.write() in modern web development. Its main use cases are gone. Sometimes, very old advertising scripts or tiny browser-specific hacks might use it, but these are rare. For everything else, there are better, safer, and more flexible methods.

The biggest reason to avoid it is its destructive nature. Accidentally calling it at the wrong time can delete all your page content. This is bad for users and hard to debug. Modern web development focuses on changing parts of the page without destroying the whole thing.

Old Way: document.write()

Modern Way: DOM Manipulation

Old Way: document.write()

<!-- In your HTML file -->
<div id="content-area"></div>
<script>
  // This will overwrite the entire page if called after load
  document.write('<h2>New Title</h2><p>Some text.</p>');
</script>

Modern Way: DOM Manipulation

<!-- In your HTML file -->
<div id="content-area"></div>
<script>
  // Get the div element by its ID
  const contentDiv = document.getElementById('content-area');
  
  // Add content safely without overwriting the page
  contentDiv.innerHTML = '<h2>New Title</h2><p>Some text.</p>';
</script>

<!-- In your HTML file -->
<div id="content-area"></div>
<script>
  // This will overwrite the entire page if called after load
  document.write('<h2>New Title</h2><p>Some text.</p>');
</script>

<!-- In your HTML file -->
<div id="content-area"></div>
<script>
  // Get the div element by its ID
  const contentDiv = document.getElementById('content-area');
  
  // Add content safely without overwriting the page
  contentDiv.innerHTML = '<h2>New Title</h2><p>Some text.</p>';
</script>

Always Prefer Modern DOM Methods

For changing content on a live web page, always use methods like element.innerHTML, element.textContent, document.createElement(), and element.appendChild(). These methods change specific parts of the page without risking accidental full page overwrites.

Modern Alternatives: Changing the Page Safely

Instead of document.write(), modern JavaScript uses methods that interact with the Document Object Model (DOM). The DOM is your browser's internal map of your web page. You can target specific elements on the page and change their content, add new elements, or remove old ones without affecting the rest of the page.

This approach is much more controlled and predictable. It is how all interactive websites work today. Let's look at how to add content to a specific spot on your page.

Prepare an HTML element

First, create an empty container in your HTML where you want to add content. Give it an id so JavaScript can find it easily.

htmlPrepare an HTML element

1<div id="my-dynamic-content"></div>

Get the element with JavaScript

Use document.getElementById() to find your container element in the JavaScript code.

javascriptGet the element with JavaScript

1const container = document.getElementById('my-dynamic-content');

Add content using innerHTML

Use the innerHTML property of the element to put new HTML inside it. This changes only that one part of the page.

javascriptAdd content using innerHTML

1container.innerHTML = '<h3>Content Added Safely!</h3><p>This paragraph is inside the div.</p>';

Or add content using appendChild

For more complex additions, you can create new elements and then add them as children to your container element.

javascriptOr add content using appendChild

1const newParagraph = document.createElement('p');
2newParagraph.textContent = 'This is another paragraph added with appendChild.';
3container.appendChild(newParagraph);

Avoid document.write() for Security and Performance

document.write() can sometimes be a security risk if you are inserting content that comes from users, making your site vulnerable to XSS (Cross-Site Scripting) attacks. It can also slow down your page or block the browser from drawing the page completely, leading to a bad user experience. These are more reasons to avoid it.

Summary of document.write() Behavior

Method	When to Use	Page Impact	Security
`document.write()`	Almost never (only during initial page load for legacy reasons)	Overwrites entire page if called after load; inserts content during load	High risk of XSS if used with untrusted input
`element.innerHTML`	To set or replace HTML content inside an existing element	Changes only the content of the target element	Moderate risk of XSS if used with untrusted input
`element.appendChild()`	To add new elements as children to an existing element	Adds new elements without affecting existing content	Low risk of XSS (when creating elements with `document.createElement()`)

Test Your Knowledge

Quick Check

What happens if you use document.write('Hello'); after a web page has fully loaded?

Quick Check

Which of these is a better and safer alternative to document.write() for adding text to an existing HTML element?

Quick Check

When is document.write() most likely to be used in modern web development?

Quick Check

Which statement about document.write() is true?

Quick Reference

Pro Tips

1document.write() — a JavaScript method to add content to the HTML document.
2Page Load Only — it works safely only when the page is initially loading and being built by the browser.
3Page Overwrite — if used after the page has fully loaded, it will erase all existing content and replace it.
4Avoid It — modern web development strongly advises against using document.write() due to its unpredictable behavior.
5DOM — the Document Object Model is the tree-like structure of your page that JavaScript interacts with.
6element.innerHTML — a safe alternative to change the HTML content inside a specific element.
7document.createElement() — used to create new HTML elements in JavaScript.
8element.appendChild() — used to add a newly created element as a child to an existing element.
9Security Risk — document.write() can be a security vulnerability (XSS) if used with unverified user input.
10Performance — it can block page rendering and negatively impact the performance of your website.

DOM Manipulation

Learn how to safely add, remove, and change HTML elements and their content using modern JavaScript methods.

Event Listeners

Understand how to make your web pages interactive by responding to user actions like clicks and key presses.

HTML Structure

Deepen your knowledge of HTML elements and how to build well-structured, semantic web pages.

Web Security Basics

Explore fundamental web security concepts to protect your applications from common vulnerabilities.

You now understand document.write()!

You have learned what document.write() does, why it is generally avoided, and the modern, safer methods to modify your web page content. This knowledge is important for writing clean, secure, and efficient JavaScript code.

Try it in the Javascript Compiler

Run and experiment with Javascript code right in your browser — no setup needed.

Open Javascript Compiler

Continue Learning

Previous Next