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

Question

什么是最好的JavaScript解决方案，将span更改为div，但保留其内容和span自己的类。设置类，以便可以对其进行硬编码。

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

IE也支持编码到 caniuse.com，包括.insertBefore()和.removeChild()，以及get和set属性方法。

请注意，这不处理附加到原始 内节点的事件处理程序或其他 javascript 对象。