Document.write clears page

Question

Why in the code below upon the call of document.write in the function validator() the form elements (the checkbox and button) are removed from screen?

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function validator() {
                if (document.myForm.thebox.checked)
                    document.write("checkBox is checked");
                else 
                    document.write("checkBox is NOT checked");
            }
        </script>
    </head>
    <body>
        <form name="myForm">
            <input type="checkbox" name ="thebox"/>
            <input type="button" onClick="validator()" name="validation" value="Press me for validation"/>
        </form>
    </body>
</html>

Jerome WAGNER · Accepted Answer · 2013-04-06T21:43:05.847

64

document.write() is used to write to the document stream.

In your case, the stream is most probably already closed when the onClick handler is called, because your document has finished loading.

Calling document.write() on a closed document stream automatically calls document.open(), which will clear the document.

edited Apr 06 '13 at 21:43

answered Jun 03 '12 at 21:12

Jerome WAGNER

21,986
8
62
77

2

@JeromeWAGNER—No. Read the [*specification*](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-72161170) linked from the page you referenced: "*Open a document stream for writing. If a document exists in the target, this method clears it.*" – RobG Jun 13 '15 at 06:55

Andy Jones · Answer 2 · 2012-06-03T21:17:35.983

14

A document.write() called after the page loads will overwrite the current document.

You want to set the text of some element within your document. If you add a

<p id="message"></p>

to the end of your body, then you can call

document.getElementById("message").innerHTML = "your text here";

Or with the jQuery library

$("#message").html("your text here");

edited Jun 03 '12 at 21:17

answered Jun 03 '12 at 21:12

Andy Jones

6,205
4
31
47

1

It should be `$("body").append("your text here");` – Derek 朕會功夫 Jun 03 '12 at 21:13
changed some things around - setting the html of a
with an id instead of just appending to the body - a bit cleaner this way
– Andy Jones Jun 03 '12 at 21:18

score 12 · Answer 3 · answered Jun 03 '12 at 21:13

Calling document.write after the document has been loaded implicitly calls document.open, which clears the current document. (Compare to calling document.open while the page is loading, which inserts the string into the document stream; it does not clear the document.)

document.write is one of the oldest vestiges of ancient JavaScript, and should generally be avoided. Instead, you probably want to use DOM manipluation methods to update the document.

This was exactly what I was looking for: document.open(); Thanks! — Harlin, Mar 17 '19 at 13:28

score 3 · Answer 4 · answered Jun 03 '12 at 21:23

you can use

alert("Checkbox is checked");

or if you will be displaying it on page, first create an element with an id "message" (you can write anything you want, but remember, id's have to be unique on the page) like

<div id="message"></div>

and then use

document.getElementById("message").innerHTML = "Checkbox is checked";

or if you are using jQuery:

$("#message").html("Checkbox is checked");

or if you are using a console enabled browser (Firefox, Chrome etc.)

console.log("Checkbox is checked");

instead of

document.write("Checkbox is checked");

Misha Taylor · Answer 5 · 2021-09-01T00:51:29.713

1

        var x = document.createElement("div")
        document.body.appendChild(x)

edited Sep 01 '21 at 00:51

answered Oct 15 '16 at 13:55

Misha Taylor

29
4

I Fixed It! Fixed Document.write! – Misha Taylor Oct 15 '16 at 14:00
I removed the `` and only grabbed the lines from `var x ...` to `x.innerHTML ...`, and I found this worked in my application. (I had to add semicolons, too.) – durette Sep 13 '18 at 18:12

Sampo Sarrala - codidact.org · Answer 6 · 2012-06-03T21:15:34.390

0

document.write is not best way to go as if there is any, yes ANY, DOM manipulation happening or happened already then document.write() does not work very well as it modifies original document but ignores any changes to DOM tree.

Also remember that browser displays things primarily from DOM, not from original document.

edited Jun 03 '12 at 21:15

answered Jun 03 '12 at 21:10

Sampo Sarrala - codidact.org

4,770
2
25
45

Document.write clears page

6 Answers6

Linked

Related