将跨度更改为div但保留其内容和类 - 并在IE中工作

Question

将span扩展为div但保留其内容和span自己的类的最佳javascript解决方案是什么。这些类被设置为可以硬编码。

<span class="my class">
  <p class="content">
   DYNAMIC CONTENT HERE
  </p>
</span>

我想使用js将其更改为

<div class="my class">
  <p class="content">
   DYNAMIC CONTENT HERE
  </p>
</div>

使用replaceWith（）似乎在IE上失败，因为它不受支持。

感谢。

Answer 1

这是使用普通javascript执行此操作的示例：

var span = document.querySelector('.my.class'),
    div = document.createElement('div');

div.setAttribute('class', span.getAttribute('class'));
div.innerHTML = span.innerHTML;
span.parentNode.insertBefore(div, span);
span.parentNode.removeChild(span);

同样支持caniuse.com，.insertBefore()和.removeChild()以及get和set属性方法也支持IE。

请注意，这不会处理附加到原始＆lt; span＆gt;中的节点的事件处理程序或其他javascript对象。