title: How to move an iFrame in the DOM without losing its state?
body: <p>Take a look at this simple HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="wrap1"&gt;
    &lt;iframe id="iframe1"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  &lt;div id="warp2"&gt;
    &lt;iframe id="iframe2"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Let's say I wanted to move the wraps so that the <code>#wrap2</code> would be before the <code>#wrap1</code>. The iframes are polluted by JavaScript. I am aware of jQuery's <code>.insertAfter()</code> and <code>.insertBefore()</code>. However, when I use those, the iFrame loses all of its HTML, and JavaScript variables and events.</p>
  
  <p>Lets say the following was the iFrame's HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        // The variable below would change on click
        // This represents changes on variables after the code is loaded
        // These changes should remain after the iFrame is moved
        variableThatChanges = false;
        $(function(){
          $("body").click(function(){ 
            variableThatChanges = true; 
          });
        });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id='anything'&gt;Illustrative Example&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In the above code, the variable <code>variableThatChanges</code> would...change if the user clicked on the body. This variable, and the click event, should remain after the iFrame is moved (along with any other variables/events that have been started)</p>
  
  <p>My question is the following: <strong>with JavaScript (with or without jQuery), how can I move the wrap nodes in the DOM (and their iframe childs) so that the iFrame's window stays the same, and the iFrame's events/variables/etc stay the same?</strong></p>