To append content to a document, you should only call document.write()
during the <script>-block parsing phase.
If you have a call to document.write
somewhere where it executes outside that context, such as in your event handler, there is no parsing going on, so nowhere for that string 'foo'
to go.
What should happen according to the original JavaScript reference is:
Event handlers execute after the original document closes, so the write method implicitly opens a new document of mimeType text/html if you do not explicitly issue a document.open method in the event handler.
That is, it assumes you've made a mistake and meant to do:
document.open('text/html');
document.write(html);
Which replaces the entire document with new content. You'll also notice that because you didn't finish that off by calling:
document.close();
...in Firefox, the ‘loading’ throbber is still animating, expecting more content to be written to the document (but it never comes).
In this case, you are document.write()
ing a string:
Hello bobince! How are you today?
that is clearly not a valid HTML document. Chrome (and Safari, which behaves the same) is trying to parse it as an HTML document, but fails because it is non-whitespace text content outside the document element (<html>), which is not allowed. If you put some tags in the name input:
Hello <em>bobince</em>! How are you today?
You'll see everything outside the <em> element is discarded. Firefox and IE manage to apply their “fix up text outside any element” broken-HTML-rule to save you, but Chrome doesn't.
If you want to document.write()
a new document, you should make sure it is indeed a complete document:
<html><head><title>Greetings</title><body><p>Hello bobince! How are you today?</p></body></html>
Or, if you want to document.write()
a text string, you should theoretically call:
document.open('text/plain');
before the write(). But beware, the mimetype parameter is not supported by Chrome or Safari; they'll always treat what you write as HTML.
In any case, you probably don't want to be using this method. If you want to add to (or change) the existing page you should normally be using DOM methods, such as setting the text on a status output div, or replacing the body contents using innerHTML.
document.write()
is needed in a few places (in particular, when you are creating a new window or frame from scratch), but otherwise it's generally the wrong thing and should be viewed with suspicion.