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

You can't change the type of a tag, you can only replace them with different tags.

You can copy the contents by setting newElement.innerHTML = oldElement.innerHTML.

Answer 2

There is no way to change a tagName.
You can create a new element and assign the attributes from the old element to the new Element, move the childNodes into it and replace the old element with the new Element.

Answer 3

Using standard interfaces, the type of a DOM element can be set only when that element is created. The closest that you can sensibly achieve in a standard way would be:

• create a new element of the required type
• copy each attribute from the old element to the new one
• move each child of the old element to be a child of the new one
• replace the old element in the DOM tree with the new one

If you want to do this, and need help to do so, do ask again.

Answer 4

You cannot change the type of an html tag name but you can replace them. An easy way to do that is with jQuerys replacewith function.

http://api.jquery.com/replaceWith/

Answer 5

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 ] );
}