title: Why javascript is not loading for document.readyState==="complete"
body: <p>I have just started learning javascript from <a href="http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_document_write" rel="noreferrer">w3school</a> and I have found out that "You can only use document.write in the HTML output. If you use it after the document has loaded, the whole document will be overwritten." so I have tried to write following code to check the validity: </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;ashish javascript learning&lt;/title&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt; sample html with javascript &lt;/p&gt;
          &lt;script&gt;
              document.write("&lt;h1&gt;this is heading&lt;/h1&gt;");
              document.write("&lt;p&gt;this is sample para&lt;/p&gt;");
          &lt;/script&gt;
          &lt;script&gt;
              if(document.readyState === "complete"){
                  loaded();
              }
              function loaded(){
                  document.write("&lt;p&gt;loading content after the document has been loaded");
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Code is still showing the old value and is not overwriting the content of the web page. Could you suggest me what am I doing wrongly. </p>