In this article we’ll consider some examples of using document.write() method.
This method is commonly used for testing and dynamically generating page content while it’s loading.
It’s a fast way to modify the document and may be used as an alternative to other approaches which are more suitable when the DOM is completely ready.
Take a look at one small example. This code just outputs custom text while executing the script:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.write("Custom text");
</script>
</body>
</html>
Now we’re going to add some tags. One should notice that the new div tag is appended right after the closing script tag:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.write("<div>Custom text</div>");
</script>
</body>
</html>
and it’s equal to
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
</script><div>Custom text</div>
</body>
</html>
If we want to append ‘\n’ after the line, we can use document.writeln():
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
<code>document.writeln("<div>First line</div>");</code>
<code>document.writeln("<div>Second line</div>");</code>
</script>
</body>
</html>
It is possible to pass several arguments to the method, for example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.write("<ul>", // This is zero argument
"<li>First argument</li>",
"<li>Second argument</li>",
"</ul>",
new Date());
</script>
</body>
</html>
Avoid such situations. It’s pretty easy to make a mistake using closing tags:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.write("end of div from script</body>");
</script>
</div> <!-- this tag is missing -->
</body>
</html>
Let’s go deeper. When creating a new window, we can finish writing after the document was loaded. Next time you click the button, document will be overwritten
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var w = window.open();
w.document.open();
w.document.writeln("Started<br/>");
function finish() {
w.document.writeln("Finished");
w.document.close();
}
</script>
<button onclick="finish();">Finish</button>
</body>
</html>
We can even finish writing step by step:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var wind = window.open();
var counter = 0;
wind.document.open();
wind.document.writeln("Started<br/>");
function finishStepByStep() {
if (counter > 3)
wind.document.close();
else
wind.document.writeln("Finished with counter = " + counter++ + "<br/>");
}
</script>
<button onclick="finishStepByStep();">Finish</button>
</body>
</html>
We can add scripts using document.write()!
Note that closing script tag in the string argument should be separated not to be interpreted by a browser as an end of scripting part (or one of the symbols should be replaced by its escape-sequence)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.write('<script>alert("lalala");</scr' + 'ipt>')
</script>
</body>
</html>
We can even call document.write() from document.write():
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.write('<script>document.write("second level lalala");<\x2fscript>')
</script>
</body>
</html>
We can call the predefined function:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function callAlert() {
alert("This is called from predefined function");
}
document.write('<script>callAlert();<\x2fscript>')
</script>
</body>
</html>
Try to avoid loading third-party scripts using document.write() because it can slow down page rendering.
You can download the full source code of this example here: JavascriptDocumentWrite
