title: Javascript onclick event to write new div
body: <p>Can't seem to figure out why this isn't working. I have an onclick event on a href that should fire a javascript function that writes a new div. Any help would be appreciated. </p>
  
  <p>I'm pretty sure my problem is with the link, not the function.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Blah&lt;/title&gt;
      &lt;style type="text/css"&gt;
      .box {
          position: fixed;
          z-index: 5;
          width:100%;
          height:100%; 
          background-color: rgba(0,0,0,.8);
          padding:25px 10px 25px 10px;
      }
      .content {
          z-index: 1;
          padding: 25px 15px 10px 15px;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;script type="text/javascript"&gt;     
          function test() {
              document.write("&lt;div class='box'&gt;Box Test&lt;/div&gt;");  
          }
      &lt;/script&gt;
      &lt;h1&gt;Test Page&lt;/h1&gt;
  
      &lt;div class="content"&gt;
          &lt;a onclick="javascript:test" href="#"&gt;Test Test Test&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>