javascript - 如何克隆一个元素并改变它的 DOM 类型

Question

我想克隆一个 DOM 元素及其所有子元素(包括数据和监听器)，但我希望生成的克隆具有不同的 DOM 类型。

例如我要转换:

<td>
 <p class="pclass">
  Hello
 </p>
 <p class="pclass">
  World!
 </p>
</td>

新元素包含:

<div>
 <p class="pclass">
  Hello
 </p>
 <p class="pclass">
  World!
 </p>
</div>

注意:我已经有了一个答案，但由于它可能会引起其他人的兴趣，并且由于答案并不完美但足够了，所以我创建了这个主题。

Answer 1

下面的 jQuery 脚本将完成这项工作:

var oldElement = $(your selector here);
var newElement = $('<my new HTML tag>').append($(oldElement).contents().clone(true, true));

此脚本保留元素 children 数据和事件监听器(参见 clone(true, true))。此脚本不保留元素本身数据和事件监听器。

注意:有人提出一个补充来保留原始元素数据和事件监听器，这可能很有趣。那里提出了答案的开始:https://stackoverflow.com/a/2207117/2227298