title: How to replace entire HTML content with Javascript?
body: <p>I tried to use <code>$(&quot;html&quot;).html(this.responseText);</code>. Which replaces the content but it does not replace the head and body tags.</p>
  <p>So for example if i want replace this content:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
  &lt;script&gt;...&lt;/script&gt;
  &lt;script&gt;...&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;This is a Heading&lt;/h1&gt;
  
  
  &lt;script&gt;...&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Then i check my HTML structure in inspector, and the result this:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
  &lt;script&gt;...&lt;/script&gt;
  &lt;script&gt;...&lt;/script&gt;
  
  &lt;h1&gt;This is a Heading&lt;/h1&gt;
  
  &lt;script&gt;...&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>And it messed my css so. I have tried without scripts, and it worked fine. What is the solution for this problem?</p>
  <p>I have also tried with javascript approach</p>
  <pre><code>document.open();
  document.write(this.responseText);
  document.close(); 
  </code></pre>
  <p>But it confuses my javascripts. I am  getting redeclaration syntax error.</p>
  <p>My real code where i want to implement:</p>
  <pre><code>&lt;script&gt;
    
          var frm = $('#frm');
          var submitActors = frm.find('input[type=submit]');
          var submitActor = null;
          submitActors.click(function(event) {
                  submitActor = this;  
          });
          
          frm.unbind('submit').submit(function () {
             
              var formAction = document.getElementById(&quot;frm&quot;).getAttribute('action'); // Get the form action.
              var data = &quot;&quot;;
              var pageUrl = &quot;&quot;;
              var test_uuid = &quot;&quot;;
              var test_number = &quot;&quot;;
              var qid = JSON.parse(sessionStorage.getItem('userChoice')).qid;
              
              
              
              if(submitActor.name == &quot;cmdSave&quot;){
                  data = {
                      &quot;cmdSave&quot; : $(&quot;#cmdSave&quot;).val(),
                      &quot;Answer&quot;: document.querySelector('input[name=&quot;Answer&quot;]:checked').value,
                      &quot;csrfmiddlewaretoken&quot;: document.querySelector('input[name=csrfmiddlewaretoken').value,
                      &quot;qid&quot;: qid
                  }
              }
              else if(submitActor.name == &quot;cmdNext&quot;){
                  data = {
                      
                      &quot;cmdNext&quot;: document.querySelector('#cmdNext').value,
                      &quot;csrfmiddlewaretoken&quot;:document.querySelector('input[name=csrfmiddlewaretoken').value,
                      &quot;qid&quot;: qid
                  }
              }
              var httpRequest = new XMLHttpRequest();
              var formData = new FormData();
              
              
              
              Object.keys(data).forEach(function(key) {
                  console.log(key, data[key]);
                  formData.append(key, data[key]);
              });
                  console.log(formData)
              httpRequest.onreadystatechange = function(){
                  if ( this.readyState == 4 &amp;&amp; this.status == 200 ) {
                  var response = this.responseText;
                      console.log(this.responseText) // Display the result inside result element.
  
                      // 1.Option
                      {% comment %} document.open();
                      document.write(this.responseText);
                      document.close(); {% endcomment %}
                      
                      // 2.Option
                      
                      {% comment %} document.documentElement.innerHTML = this.responseText;  {% endcomment %}
                      
              
                      // 3.Option
                      $(document).ready(function(){
                          $(&quot;html&quot;).html(response);
                      });
                                                                               
                  
                      test_number = document.getElementById(&quot;lblNrCrt&quot;).textContent;  
                      test_uuid = &quot;{{test.uuid}}&quot;;
                      pageUrl = &quot;/intro/&quot; + test_uuid + &quot;/&quot; + test_number + &quot;/&quot;;
                      window.history.pushState('', '', pageUrl);
                  }
              };
  
              httpRequest.open(&quot;post&quot;, formAction);
              httpRequest.send(formData);
  
              return false;
          
          });
  
  &lt;/script&gt;
  
  </code></pre>