title: Replacing HTML source of an iframe document
body: <p>I am working on a page that will display the contents of a database field. The contents are in HTML format and includes an entire webpage</p>
  
  <pre><code>&lt;html&gt;
    &lt;title&gt;Some title&lt;/title&gt;
    &lt;style type="text/css"&gt;
       /* CSS content here */
    &lt;/style&gt;
    &lt;body&gt;
      &lt;!-- body content here --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I need to display all of this inside another webpage so I thought using an iframe would allow me to negate any css from the parent page.  However, I cannot figure out how to overwrite the contents of the iframe document.  </p>
  
  <p>What I've done so far is retrieve the data and then use the following</p>
  
  <pre><code>$("#iframe_constainer")
    .find('iframe:first').contents().find('html:first').html(myHTML);
  </code></pre>
  
  <p>My web page includes a div called iframe_container which contains an iframe.</p>
  
  <pre><code>&lt;div id="iframe_container"&gt;&lt;iframe/&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is working okay, but the contents of <code>myHTML</code> are getting wrapped inside <code>html</code> tags.  So the effect is like this</p>
  
  <pre><code>&lt;html&gt;
    &lt;html&gt;
      &lt;title&gt;Some title&lt;/title&gt;
      &lt;style type="text/css"&gt;
         /* CSS content here */
      &lt;/style&gt;
      &lt;body&gt;
        &lt;!-- body content here --&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I know it's because I'm finding the html tag in the iframe and changing the HTML.  Is there a way to overwrite the entire document using jQuery?</p>