Come spostare un iFrame nel DOM senza perdere il suo stato?

Dai un’occhiata a questo semplice HTML:

Diciamo che volevo spostare gli involucri in modo che il #wrap2 fosse prima del #wrap1 . Gli iframe sono inquinati da JavaScript. Sono a conoscenza di jQuery’s .insertAfter() e .insertBefore() . Tuttavia, quando li uso, l’iFrame perde tutte le sue variabili HTML e JavaScript ed eventi.

Diciamo che il seguente è l’HTML di iFrame:

     // 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; }); });    
Illustrative Example

Nel codice precedente, la variabile variableThatChanges dovrebbe … cambiare se l’utente ha fatto clic sul corpo. Questa variabile e l’evento click devono rimanere dopo che l’iFrame è stato spostato (insieme alle altre variabili / eventi che sono stati avviati)

La mia domanda è la seguente: con JavaScript (con o senza jQuery), come posso spostare i nodes di wrap nel DOM (e i loro iframe childs) in modo che la finestra di iFrame rimanga la stessa, e gli eventi / variabili / etc di iFrame rimangano il stesso?