My overall aim is to create an editor which I can skin using jQuery UI (by creating a custom toolbar which uses integration calls), using TinyMCE.

Lets say I have a TinyMCE editor on a page. The actual editor is an iFrame contained inside a lot of horrible table code, which is also where the current (to be scrapped) toolbar is. I want just the iframe inside a div - ideally get rid of the table code.

So...I want to transform:

<table>
    <tr>
        <td><iframe id="xyz"></iframe></td>
    </tr>
</table>

into

<div id="test">
    <iframe id="xyz"></iframe>
</div>

So far, I've tried using:

$('#xyz').clone(true).appendTo('#test');

Which clones the iframe, but no content inside it.

Is there a way to make this work?

If not, can I somehow strip the table code from around the iFrame away?

If I cant do that, I'll think I'll have to keep the table code.