Move iFrame in the DOM using jQuery

Question

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.

Answer 1

$('table').replaceWith($('iframe:first'));

Try that... It replaces the table with the inner iframe.

Answer 2

How about:

// http://api.jquery.com/replaceWith/
$('table:has(#xyz)').replaceWith($('#xyz'));
// http://api.jquery.com/wrap/
$('#xyz').wrap('<div id="test" />');

Answer 3

Couldn't get this working properly, so instead got rid of the TinyMCE UI with a bit of CSS.

Thanks for all the suggestions though!