See also: • Computer Stuff • Amazing Insanity • HTML: Stop Line Break • The FISH Page • Patterns
View output from document.write
How to view the HTML produced by JavaScript document.write.

People look for "how to javascript" and "view source javascript" and they are very vague phrases but this page is all about how to view the HTML output from the JavaScript command "document.write" or "document.writeln" when you are using it to write HTML.

The problem is that when you use JavaScript to write HTML to your web page you cannot see what it produces.  If you view the page in a browser and "view source" what you get is the original JavaScript code.  So where is the HTML that it produces?  Well it is stuck inside the browser.

But there is a neat little trick to view the output HTML and it is to "Save" the web page from the browser to your hard disc.  Then open the saved page with a browser and "View Source".  Hey presto the output is in the saved HTML file.

It is not so often that you would want to produce HTML code with JavaScript.  It is usually better to use PHP or something else but just sometimes there is that exception.  A little warning here is that if the HTML code is generated by the JavaScript then, every time any variable content is re-written, the whole of the page will be re-rendered.  (N.B This is not the case when the source image is changed because the <img> tag creates a holding space for the referenced image and the image itself is not part of the rendered page as such).  It is usually best to keep HTML code outside of any JavaScript.

I was writing some JavaScript to generate a table for a number of small images in a grid.  The page I was working on is Amazing Insanity and I anticipated that the number of tiny images might change in the future.  To hard code all the cells for the images would be a long job and if the number changed it would be a lot of effort to change the HTML. So I wrote the following code:

This is the initialisation code and a function to randomly change an image.
It is located in the <head> section of the document:

<script type="text/javascript" language="JavaScript">
//<!--
MazePic=new Array();
MazePic[0]='pics/maze/maze-01.gif';
MazePic[1]='pics/maze/maze-02.gif';
MazePic[2]='pics/maze/maze-03.gif';
MazePic[3]='pics/maze/maze-04.gif';
MazePic[4]='pics/maze/maze-05.gif';
MazePic[5]='pics/maze/maze-06.gif';
MazePic[6]='pics/maze/maze-07.gif';
MazePic[7]='pics/maze/maze-08.gif';
MazePic[8]='pics/maze/maze-09.gif';
MazePic[9]='pics/maze/maze-10.gif';
MazePic[10]='pics/maze/maze-11.gif';
MazePic[11]='pics/maze/maze-12.gif';

var HoldImage=new Array();
for(i=0; i<12; i++)
  {
  HoldImage[i]=new Image();
  HoldImage[i].src=MazePic[i];
  }

function ChangeSquare()
  {
  document.getElementById("s"+(Math.floor(Math.random()*256))).setAttribute("src", MazePic[Math.floor(Math.random()*12)]);
  setTimeout("ChangeSquare()", 10+Math.floor(Math.random()*1000));
  }
//-->
</script>

This is the code to produce the large table of images and is in the <body> of the document:

<table width="10%" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <script type="text/javascript">
        //<!--
        var SquaresAcross=16;
        var SquaresDown=16;
        document.writeln("<table width=\"100%\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">");
        for (i=0; i<(SquaresAcross*SquaresDown); i++)
          {
          if ((i%SquaresDown)==0) {document.writeln(" <tr>")};
          document.writeln("   <td width=\"34\" height=\"34\"> <img src=\"pics/maze/maze-11.gif\" alt=\"s"+i+"\" name=\"s"+i+"\" width=\"34\" height=\"34\" id=\"s"+i+"\" /> </td>");
          if ((i%SquaresDown)==(SquaresDown-1)) {document.writeln("  </tr>")};
          }
        document.writeln("</table>");
        //-->
      </script>
    </td>
  </tr>
</table>

This is a small section of the actual HTML produced;
It is only viewable by first 'saving' the rendered page and then loading the saved version into a browser and 'viewing source' (You'll understand why it was preferable to produce the JavaScript rather than the raw HTML):

.
.
.
Line 185
<table width="10%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody><tr>
    <td width="34" height="34"> <img src="pics/maze-11.gif" alt="s0" name="s0" width="34" height="34" id="s0"> </td>
    <td width="34" height="34"> <img src="pics/maze-09.gif" alt="s1" name="s1" width="34" height="34" id="s1"> </td>
    <td width="34" height="34"> <img src="pics/maze-09.gif" alt="s2" name="s2" width="34" height="34" id="s2"> </td>
    <td width="34" height="34"> <img src="pics/maze-07.gif" alt="s3" name="s3" width="34" height="34" id="s3"> </td>
    <td width="34" height="34"> <img src="pics/maze-06.gif" alt="s4" name="s4" width="34" height="34" id="s4"> </td>
    <td width="34" height="34"> <img src="pics/maze-04.gif" alt="s5" name="s5" width="34" height="34" id="s5"> </td>
    <td width="34" height="34"> <img src="pics/maze-09.gif" alt="s6" name="s6" width="34" height="34" id="s6"> </td>
    <td width="34" height="34"> <img src="pics/maze-12.gif" alt="s7" name="s7" width="34" height="34" id="s7"> </td>
    <td width="34" height="34"> <img src="pics/maze-06.gif" alt="s8" name="s8" width="34" height="34" id="s8"> </td>
    <td width="34" height="34"> <img src="pics/maze-06.gif" alt="s9" name="s9" width="34" height="34" id="s9"> </td>
    <td width="34" height="34"> <img src="pics/maze-07.gif" alt="s10" name="s10" width="34" height="34" id="s10"> </td>
    <td width="34" height="34"> <img src="pics/maze-03.gif" alt="s11" name="s11" width="34" height="34" id="s11"> </td>
    <td width="34" height="34"> <img src="pics/maze-09.gif" alt="s12" name="s12" width="34" height="34" id="s12"> </td>
    <td width="34" height="34"> <img src="pics/maze-10.gif" alt="s13" name="s13" width="34" height="34" id="s13"> </td>
    <td width="34" height="34"> <img src="pics/maze-01.gif" alt="s14" name="s14" width="34" height="34" id="s14"> </td>
    <td width="34" height="34"> <img src="pics/maze-08.gif" alt="s15" name="s15" width="34" height="34" id="s15"> </td>
  </tr>
  <tr>
    <td width="34" height="34"> <img src="pics/maze-06.gif" alt="s16" name="s16" width="34" height="34" id="s16"> </td>
    <td width="34" height="34"> <img src="pics/maze-04.gif" alt="s17" name="s17" width="34" height="34" id="s17"> </td>
    <td width="34" height="34"> <img src="pics/maze-10.gif" alt="s18" name="s18" width="34" height="34" id="s18"> </td>
    <td width="34" height="34"> <img src="pics/maze-01.gif" alt="s19" name="s19" width="34" height="34" id="s19"> </td>
    <td width="34" height="34"> <img src="pics/maze-07.gif" alt="s20" name="s20" width="34" height="34" id="s20"> </td>
    <td width="34" height="34"> <img src="pics/maze-04.gif" alt="s21" name="s21" width="34" height="34" id="s21"> </td>
    <td width="34" height="34"> <img src="pics/maze-11.gif" alt="s22" name="s22" width="34" height="34" id="s22"> </td>
    <td width="34" height="34"> <img src="pics/maze-09.gif" alt="s23" name="s23" width="34" height="34" id="s23"> </td>
    <td width="34" height="34"> <img src="pics/maze-10.gif" alt="s24" name="s24" width="34" height="34" id="s24"> </td>
    <td width="34" height="34"> <img src="pics/maze-02.gif" alt="s25" name="s25" width="34" height="34" id="s25"> </td>
    <td width="34" height="34"> <img src="pics/maze-06.gif" alt="s26" name="s26" width="34" height="34" id="s26"> </td>
    <td width="34" height="34"> <img src="pics/maze-06.gif" alt="s27" name="s27" width="34" height="34" id="s27"> </td>
    <td width="34" height="34"> <img src="pics/maze-06.gif" alt="s28" name="s28" width="34" height="34" id="s28"> </td>
    <td width="34" height="34"> <img src="pics/maze-12.gif" alt="s29" name="s29" width="34" height="34" id="s29"> </td>
    <td width="34" height="34"> <img src="pics/maze-04.gif" alt="s30" name="s30" width="34" height="34" id="s30"> </td>
    <td width="34" height="34"> <img src="pics/maze-05.gif" alt="s31" name="s31" width="34" height="34" id="s31"> </td>
  </tr>
Line 255
.
.
.
Line 466
  <tr>
    <td width="34" height="34"> <img src="pics/maze-07.gif" alt="s224" name="s224" width="34" height="34" id="s224"> </td>
    <td width="34" height="34"> <img src="pics/maze-01.gif" alt="s225" name="s225" width="34" height="34" id="s225"> </td>
    <td width="34" height="34"> <img src="pics/maze-03.gif" alt="s226" name="s226" width="34" height="34" id="s226"> </td>
    <td width="34" height="34"> <img src="pics/maze-09.gif" alt="s227" name="s227" width="34" height="34" id="s227"> </td>
    <td width="34" height="34"> <img src="pics/maze-03.gif" alt="s228" name="s228" width="34" height="34" id="s228"> </td>
    <td width="34" height="34"> <img src="pics/maze-09.gif" alt="s229" name="s229" width="34" height="34" id="s229"> </td>
    <td width="34" height="34"> <img src="pics/maze-10.gif" alt="s230" name="s230" width="34" height="34" id="s230"> </td>
    <td width="34" height="34"> <img src="pics/maze-04.gif" alt="s231" name="s231" width="34" height="34" id="s231"> </td>
    <td width="34" height="34"> <img src="pics/maze-01.gif" alt="s232" name="s232" width="34" height="34" id="s232"> </td>
    <td width="34" height="34"> <img src="pics/maze-02.gif" alt="s233" name="s233" width="34" height="34" id="s233"> </td>
    <td width="34" height="34"> <img src="pics/maze-03.gif" alt="s234" name="s234" width="34" height="34" id="s234"> </td>
    <td width="34" height="34"> <img src="pics/maze-10.gif" alt="s235" name="s235" width="34" height="34" id="s235"> </td>
    <td width="34" height="34"> <img src="pics/maze-03.gif" alt="s236" name="s236" width="34" height="34" id="s236"> </td>
    <td width="34" height="34"> <img src="pics/maze-02.gif" alt="s237" name="s237" width="34" height="34" id="s237"> </td>
    <td width="34" height="34"> <img src="pics/maze-08.gif" alt="s238" name="s238" width="34" height="34" id="s238"> </td>
    <td width="34" height="34"> <img src="pics/maze-05.gif" alt="s239" name="s239" width="34" height="34" id="s239"> </td>
  </tr>
  <tr>
    <td width="34" height="34"> <img src="pics/maze-07.gif" alt="s240" name="s240" width="34" height="34" id="s240"> </td>
    <td width="34" height="34"> <img src="pics/maze-08.gif" alt="s241" name="s241" width="34" height="34" id="s241"> </td>
    <td width="34" height="34"> <img src="pics/maze-05.gif" alt="s242" name="s242" width="34" height="34" id="s242"> </td>
    <td width="34" height="34"> <img src="pics/maze-11.gif" alt="s243" name="s243" width="34" height="34" id="s243"> </td>
    <td width="34" height="34"> <img src="pics/maze-09.gif" alt="s244" name="s244" width="34" height="34" id="s244"> </td>
    <td width="34" height="34"> <img src="pics/maze-09.gif" alt="s245" name="s245" width="34" height="34" id="s245"> </td>
    <td width="34" height="34"> <img src="pics/maze-09.gif" alt="s246" name="s246" width="34" height="34" id="s246"> </td>
    <td width="34" height="34"> <img src="pics/maze-02.gif" alt="s247" name="s247" width="34" height="34" id="s247"> </td>
    <td width="34" height="34"> <img src="pics/maze-11.gif" alt="s248" name="s248" width="34" height="34" id="s248"> </td>
    <td width="34" height="34"> <img src="pics/maze-11.gif" alt="s249" name="s249" width="34" height="34" id="s249"> </td>
    <td width="34" height="34"> <img src="pics/maze-08.gif" alt="s250" name="s250" width="34" height="34" id="s250"> </td>
    <td width="34" height="34"> <img src="pics/maze-01.gif" alt="s251" name="s251" width="34" height="34" id="s251"> </td>
    <td width="34" height="34"> <img src="pics/maze-07.gif" alt="s252" name="s252" width="34" height="34" id="s252"> </td>
    <td width="34" height="34"> <img src="pics/maze-02.gif" alt="s253" name="s253" width="34" height="34" id="s253"> </td>
    <td width="34" height="34"> <img src="pics/maze-07.gif" alt="s254" name="s254" width="34" height="34" id="s254"> </td>
    <td width="34" height="34"> <img src="pics/maze-12.gif" alt="s255" name="s255" width="34" height="34" id="s255"> </td>
  </tr>
</tbody></table>
Line 506
.
.
.     

Typically it is very hard to debug JavaScript and I'm not sure why no one has addressed this problem.  The net result is that there is a lot of rubbish JavaScript code out there roaming the internet.

But this is a neat little trick for viewing the actual HTML output from your JavaScript document.write commands.

So if you want to view JavaScript document.write output remember all you have to do is open the HTML page in a browser and save it.  Then you can view the actual HTML produced in the saved file.


Made 7 August 2011
Toxic Drums Share

© Sente Limited 2009