使用Javascript更改标签的类型

Question

假设我想要在页面上更改所有的<img>标签为<iframe>标签，是否可以使用JavaScript来实现？

是否有办法更改实际的标签类型，还是必须首先删除<img>，然后创建<iframe>？如果是这样，如何确保新标签具有与旧标签相同的容器等？

最直接且浏览器友好的方法是什么，可用于执行此类替换操作？

- Joshua

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

- user113716

Answer 2

使用标准接口，DOM元素的类型只能在创建元素时设置。以标准方式合理实现的最接近方法是：

• 创建所需类型的新元素
• 将每个属性从旧元素复制到新元素
• 将旧元素的每个子元素移动为新元素的子元素
• 用新元素替换DOM树中的旧元素

如果您想这样做，并需要帮助，请再次询问。

- Tim

Answer 3

无法更改标记名称。
您可以创建一个新元素，并将旧元素的属性分配给新元素，将子节点移动到其中，并用新元素替换旧元素。

- Dr.Molle

Answer 4

你不能更改HTML标签名称的类型，但可以替换它们。 一个简单的方法是使用jQuery的replacewith函数。

- Robert

Answer 5

你不能更改标签的类型，只能用不同的标签替换它们。

你可以通过设置 newElement.innerHTML = oldElement.innerHTML 来复制内容。

- Brad Mace

---

请注意，尽管 innerHTML 得到了广泛支持，但它目前并不是任何 W3C 标准的一部分。如果您想要创建一个最大程度可移植的实现，应该避免使用 innerHTML。 - Tim