Using Javascript To Change The Very TYPE Of Tag

Question

Let's say I wanted to change all <img> tags to <iframe> tags on a page. Could javascript be used for this purpose?

Is there any way to change the actual tag type, or would I have to first delete the <img> and then create the <iframe>, if so, how can I make sure that the new tag has the same container as the old tag, etc?

What's the most straightforward and browser friendly way to perform such a substitution?

Answer 1

Although it is more convenient using a library like jQuery, you can do it with no library like this (replacing the element, not changing the type):

Example: http://jsfiddle.net/BvSvb/

var imgs = document.getElementsByTagName('img');

var i = imgs.length;
var parent;
var iframe = document.createElement( 'iframe' );
var currFrame;

while( i-- ) {
    currFrame = iframe.cloneNode( false );
    currFrame.setAttribute( 'src', imgs[ i ].getAttribute( 'src' ) );
    parent = imgs[ i ].parentNode;
    parent.insertBefore( currFrame, imgs[ i ] );
    parent.removeChild( imgs[ i ] );
}