The document.write methods outputs a string directly into page.

This is one of most ancient methods of appending to a document. It is very rarely used in modern web applications, but still it has it’s special place.

How document.write works

When document is loading, a script may document.write(text) into the document. The text will be rendered same way as if it were in HTML.

See the example below:

...

<script>
  document.write('*Hello, there!*')
</script>
...

There are no restrictions on the contents of document.write. It doesn’t have to output valid tags, close them or anything.

In the example below, each document.write outputs a piece of text which is appended to the page.

<script> document.write('<style> td { color: #F40 } </style>') </script>
<table>
  <tr>
  <script> document.write('<td>') </script>
   The sun is rising, and I'm happy to welcome it.
  <script> document.write('</td>') </script>
  </tr>
</table>

There is also a variation named document.writeln(text) which appends ‘\n’ after the text.

Open document only

There is only one restriction on document.write.

When the page finishes loading, the document becomes closed. An attempt to document.write in it will cause the contents to be erased.

The benefits and uses

In most cases, it is preferred to use DOM for modifications, because it is convenient, and there is innerHTML, which is almost the same.

But document.write is the fastest way to add a script-generated text into the page.

Also, it is used to insert advertising scripts and counters:

<script>
  var url = 'http://ads.com/buyme?rand='+Math.random()
  document.write('<script src="'+url+'"></scr'+'ipt>')
</script>

• A script URL is generated dynamically, to allow user-specific data may be added to the URL, like screen resolution and other stuff available from JS.
• Adding a random value prevents caching even for a force-caching proxy.
• Note that the closing </SCRIPT> is split. Otherwise browser would think that the script finishes right at that </SCRIPT>.

That's convenient, but a bad way, because loading a script may block the rest of page from rendering. Especially, a problem when the ads server is slow.

Think thrice before inserting a third-party script into HTML.

There is a better way which doesn't block the page. Use the DOM, create SCRIPT element and append it to HEAD.

var script = document.createElement('script')
script.src = 'http://ads.com/buyme?rand='+Math.random()

// now append the script into HEAD, it will fetched and executed
document.documentElement.firstChild.appendChild(script)

Using DOM doesn’t block the page and makes the page faster and safe from third-party lags.

Summary

The document.write (or writeln) allows to output a text directly into HTML. It deletes (reopens) the whole document if called after page loading.

The advantages of document.write are:

1. It can append arbitrary, even partial, incomplete and malformed HTML into document.
2. It is very fast, because the browser doesn’t have to modify an existing DOM structure.