Getting Rid of document.write

Format
mla apa chicago
Your Citation
Chapman, Stephen. "Getting Rid of document.write." ThoughtCo, May. 1, 2014, thoughtco.com/getting-rid-of-document-write-2037547. Chapman, Stephen. (2014, May 1). Getting Rid of document.write. Retrieved from https://www.thoughtco.com/getting-rid-of-document-write-2037547 Chapman, Stephen. "Getting Rid of document.write." ThoughtCo. https://www.thoughtco.com/getting-rid-of-document-write-2037547 (accessed October 21, 2017).

With modern browsers there is no longer any need at all to use document.write() statements anywhere in your JavaScript.at least not for any new JavaScript that you write. It is also worthwhile to look at gradually rewriting any existing JavaScript that you have so as to get rid of the document.write() statements that you may already have.

A document.write() statement must go in the web page at the point where you want the content of the statement to be written.

Also if that code that is written contains another script then the statement to write that script tag must come last within the current script since some browsers do not run scripts written to the page that way until after the current script finishes.Using document.write() statements means that we could have a number of scripts scattered throughout our HTML.

The big advantage of getting rid of document.write() statements is that it allows us to place all the JavaScript together at the bottom of the HTML just before the </body> tag and still have it insert all the appropriate content into the places that we desire within the web page.

How we can do this conversion is rather simple. We can easily substitute this alternate method of writing our code when writing new scripts and updating existing scripts is just a matter of finding a few minutes to actually go in and make the changes.

Let's look at a simple example:


<noscript type="text/javascript">
document.write('<p>Hello World.<br>Here I am.</p>');
</noscript>

Instead of placing that in the web page where we want that content to appear we instead place a div tag in that position and give it an id that we can then use to reference it from the JavaScript.


<div id="hello"></div>

With that HTML substituted for our earlier HTML that directly called the script all we need do now is to add a script to the bottom of the web page that will update the content of that div with the same content as we would have written there directly using the document.write statement.


<noscript type="text/javascript">
document.getElementById('hello').innerHTML =
'<p>Hello World.<br>Here I am.</p>';
</noscript>

That simple change gets rid of the scripts containing document.write() statements scattered through our web page and replaces them all with a single script at the bottom of the page since all the updates can be added into the one script now that it doesn't have to go where the content is being inserted.

The only complication is where we have multiple document.write statements some of which are contained in if statements etc. The simplest solution there is to set up a variable to hold whatever is to be output and to use the += operator to concatenate each of the pieces of the content from each document.write statement onto the end of that variable and then output the variable at the end. For example:


<noscript type="text/javascript">
document.write('<p>Hello World.<br>Here I am.</p>');
if (a == b) document.write('<p>a = b.<p>');
</noscript>

This would use the same HTML in place of the script along with the following script added to the bottom of the page:


<noscript type="text/javascript">
var hellow = '<p>Hello World.<br>Here I am.</p>';
if (a == b) hellow += '<p>a = b.<p>';
document.getElementById('hello').innerHTML = hellow;
</noscript>

Note that I avoided using the same name for the temporary field as I used for the id in order to avoid a bug in Internet Explorer.