When inserting elements into DOM with jQuery, how do you prevent page from briefly jumping on load?
<p>I am moving a DIV (from a hidden iFrame) to the top of a page with jQuery, like so:</p>

<pre><code>$(document).ready(function($) {
$('#precontainer').clone().insertBefore(parent.document.querySelectorAll(".maincontainer"));});
</code></pre>

<p>Whenever I reload that page, I very briefly see the original page jumping down to make room for the DIV I am inserting. Can this behavior be prevented? </p>

<p>What I'm doing now is give the "maincontainer" a large margin at the top with CSS that is roughly as high as the "precontainer" DIV that is inserted above it, and after that DIV is inserted, I use jQuery to remove the top margin from "maincontainer", so the jumping or flashing effect is less severe. But there has to be a better way right?</p>

<p>I should mention that I only have access to the iFrame that I am using to manipulate the DOM of its parent (which holds "maincontainer". I can not modify the parent, so I have to do everything through the iFrame.</p>
