Home » JavaScript » Javascript document.write() example

About Dmitry Mishchenko

This year I graduate from Applied Mathematics department of Brest State University. I'm fond of genetic algorithms and my degree work will be about generating timetables. Also I'm keen on programming and web-development, especially Java and Javascript. Now I work as a Java Developer at Java department of VRP Consulting.

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:

<!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.

Download
You can download the full source code of this example here: JavascriptDocumentWrite

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments