When would you use `document.write()`?

TL;DR

document.write() is rarely used in modern web development because it can overwrite the entire document if called after the page has loaded. It is mainly used for simple tasks like writing content during the initial page load, such as for educational purposes or quick debugging. However, it is generally recommended to use other methods like innerHTML, appendChild(), or modern frameworks for manipulating the DOM.

When would you use `document.write()`?

Initial page load

document.write() can be used to write content directly to the document during the initial page load. This is one of the few scenarios where it might be appropriate, as it can be simpler and faster for very basic tasks.

<!doctype html>
<html>
  <head>
    <title>Document Write Example</title>
  </head>
  <body>
    <script>
      document.write('<h1>Hello, World!</h1>');
    </script>
  </body>
</html>

Educational purposes

document.write() is sometimes used in educational contexts to demonstrate basic JavaScript concepts. It provides a straightforward way to show how JavaScript can manipulate the DOM.

Quick debugging

For quick and dirty debugging, document.write() can be used to output variables or messages directly to the document. However, this is not recommended for production code.

var debugMessage = 'Debugging message';
document.write(debugMessage);

Legacy code

In some older codebases, you might encounter document.write(). While it's not recommended to use it in new projects, understanding it can be useful for maintaining or refactoring legacy code.

Why not use `document.write()`?

Overwrites the document: If called after the page has loaded, document.write() will overwrite the entire document, which can lead to loss of content and a poor user experience.
Better alternatives: Modern methods like innerHTML, appendChild(), and frameworks like React or Vue provide more control and are safer to use.

// Using innerHTML
document.getElementById('content').innerHTML = '<h1>Hello, World!</h1>';

// Using appendChild
var newElement = document.createElement('h1');
newElement.textContent = 'Hello, World!';
document.getElementById('content').appendChild(newElement);

When would you use `document.write()`?

TL;DR