Использование Javascript для изменения самого типа тега

Question

Допустим, я хотел изменить все <img> теги на <iframe> теги на странице.Может ли JavaScript использоваться для этой цели?

Есть ли способ изменить фактический тип тега, или мне нужно сначала удалить <img>, а затем создать <iframe>, если так, как я могу убедиться, что новый тег имееттот же контейнер, что и у старого тега, и т. д.

Какой самый простой и удобный для браузера способ выполнить такую ​​замену?

Answer 1

Хотя удобнее использовать библиотеку типа jQuery, вы можете сделать это без такой библиотеки (заменив элемент, не меняя тип):

Пример: 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 ] );
}

Answer 2

Используя стандартные интерфейсы, тип элемента DOM может быть установлен только при создании этого элемента.Наиболее близким, что вы можете разумно достичь стандартным способом, будет:

• создать новый элемент требуемого типа
• скопировать каждый атрибут из старого элемента в новый
• переместите каждый дочерний элемент старого элемента в дочерний элемент нового
• замените старый элемент в дереве DOM новым

Если вы хотитесделайте это, и вам нужна помощь, спросите снова.

Answer 3

Вы не можете изменить тип имени тега html, но вы можете заменить их. Простой способ сделать это с помощью функции jQuerys replacewith .

Answer 4

Нет способа изменить tagName.
Вы можете создать новый элемент и назначить атрибуты старого элемента новому элементу, переместить в него childNodes и заменить старый элемент новым элементом.

Answer 5

Вы не можете изменить тип тега, вы можете заменить их только другими тегами.

Вы можете скопировать содержимое, установив newElement.innerHTML = oldElement.innerHTML.