Javascript document.write() example
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:
01 02 03 04 05 06 07 08 09 10 | <! 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:
01 02 03 04 05 06 07 08 09 10 | <! DOCTYPE html> < html > < head > </ head > < body > < script > document.write("< div >Custom text</ div >"); </ script > </ body > </ html > |
and it’s equal to
1 2 3 4 5 6 7 8 9 | <! 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()
:
01 02 03 04 05 06 07 08 09 10 11 | <! 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:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | <! 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:
01 02 03 04 05 06 07 08 09 10 11 | <! 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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | <! 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:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 | <! 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)
01 02 03 04 05 06 07 08 09 10 | <! 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()
:
01 02 03 04 05 06 07 08 09 10 | <! 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:
01 02 03 04 05 06 07 08 09 10 11 12 13 | <! 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