document.write – dynamic writing

The document.write() method writes the supplied string directly to the output stream during the document’s parsing phase. It should only be used in teaching examples, because after the page finishes loading it overwrites the entire document.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document.write – example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 16px;
        }
        button {
            margin: 8px 0;
            padding: 6px 12px;
            font-size: 14px;
        }
        pre {
            padding: 8px;
            border: 1px solid #ccc;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1>document.write – example</h1>

    <button id="writeBtn">Add paragraph with document.write()</button>

    <pre id="log"></pre>

    <script>
        document.getElementById("writeBtn").onclick = function () {
            // document.write works only during parsing, so we invoke it inside a zero‑delay timeout
            // to simulate “dynamic” writing after a click.
            setTimeout(() => {
                document.write(
                    "<p style='margin: 12px 0;'><strong>New paragraph created with document.write()</strong></p>"
                );
                // Because document.write overwrites the whole page after loading,
                // we do not write any further logs here.
            }, 0);
            document.getElementById("log").textContent =
                "document.write has been executed (warning: it will overwrite the entire page).";
        };
    </script>
</body>
</html>

RESULT