how to embed the whole <body> into a created new div with jQuery?
<p>I want to wrap all Body content into a <code>&lt;div&gt;</code>, not including the <code>&lt;body&gt;</code> tag, details, </p>

<p>change files DOM from</p>

<pre><code>&lt;html&gt;
    &lt;body&gt;i'm a body&lt;/body&gt;
    &lt;p&gt;i'm out of body&lt;/p&gt;
&lt;/html&gt;
</code></pre>

<p>to (just put all inside of body into one div)</p>

<pre><code>&lt;html&gt;
    &lt;body&gt;
        &lt;div id='bodyContainer'&gt;
            i'm a body
        &lt;/div&gt;
        &lt;div id='footer'&gt;
            i'm a footer
        &lt;/div&gt;
    &lt;/body&gt;
    &lt;p&gt;i'm out of body&lt;/p&gt;
&lt;/html&gt;
</code></pre>

<p>I tried to make it happen by jQuery</p>

<pre><code>$(document).ready(function() {
    $("body").append("&lt;div id='container'&gt;I'm a body-container&lt;/div&gt;");
    $("body").append("&lt;div id='footer'&gt;i'm testing!&lt;/div&gt;");
});
</code></pre>

<p>but failed to reform DOM as </p>

<pre><code>&lt;html&gt;
    &lt;div id='bodyContainer'&gt;
        &lt;body&gt;            
            i'm a body
        &lt;/body&gt;
       &lt;p&gt;i'm out of body&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id='footer'&gt;
        i'm a footer
    &lt;/div&gt;
&lt;/html&gt;
</code></pre>

<p>this is not what I want,  please see example <a href="http://jsfiddle.net/7szM4/2/" rel="nofollow">http://jsfiddle.net/7szM4/2/</a>
Thanks.</p>
