Using document.write()
The document.write() method will directly write into the page. It gives the output string directly into the page.
document.write() method is the fastest method to gives the output because it does not change the any HTML element.
Syntax:
document.write("string");
Example:
document.write("Hello World.");
Now a days, the most of the programmer does not uses the document.write() method.
document.write() method append the output into the browser or document. The text will rendered same way as if it were in HTML.
There is no restrictions on the contents of the document.write(). It can accept any contents and write it in the browser.
It is not responsible to give the valid tags, close them or anything else. It gives the output as it is.
Example:
<body>
<script>document.write("Hello")</script>
<script>document.write("World.")</script>
</body>
Output:
Hello World.
One Restrictions Only:
There is only one restrictions on document.write() method.
It should be write in the unready (open or loading) web pages. If the page is unready or open than it will be append the text in the page.
If the web page is closed (loaded) than document.write() method will overwrite the current contents of the page.
Unready (open or loading) web page:
If the last statement of the web page (</html>) is not executed and the all the contents of the page is still not loaded than it called the Unready web page.
Unready web page means the page is still loading or the whole page is not loaded in the browser and the document.write() method is executed so it will append the text in the web page.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
Hello World.
<script>document.write("<br/> JavaScript.")</script>
</body>
</html>
Output:
Hello World. JavaScript.
Unready Document (Click here to see Live Demo)
In above example, The document.write() method is executed before the the page is fully loaded in the browser. So it will append the text into the web page.
Ready (Close) web page:
Ready (Close) web page means the web page is fully loaded in the browser or the all the contents of the web page is loaded in the browser and the last statement of the page (</html>) is executed so it called the Ready (Close) web page.
So when the page is ready or close, the document.write() method will clear all the contents of the web page and the add new contents on it. (Simply, We can say that when the page is ready so document.write() method will overwrite the current contents of the web page.)
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
Hello World.
<script>
setTimeout(function () {
document.write("JavaScript Hive...");
}, 1500);
</script>
</body>
</html>
Output:
JavaScript Hive...
Ready Document (Click here to see Live Demo)
In above example, I set the timeout of the 1.5 sec, So the page will be get the time to load after the timeout document.write() method will be called and till now the whole page will be loaded fully, so document.write() method will be overwrite the current contents of the web page.
So it will only display the output given by the document.write() method.