javascript - 如何更改 jQuery 中的包装标签？

Question

下面的代码行，将把 p 标签更改为 div 标签:

$('p').contents().unwrap().wrap('<div />');

问题是:

这也会将任何内部标签变成 div!

例子:

采用以下 HTML:

<p>abc<a>121</a>cba</p>

运行我上面的代码给我这个:

<div>abc</div>
<div><a>121</a></div>
<div>cba</div>

但是我想实现这个:

<div>abc<a>121</a>cba</div>

我可以做些什么来实现这一点，为什么我的方法不起作用？

Answer 1

你需要

$('p').wrap('<div />').contents().unwrap();

演示:Fiddle

你的代码是错误的因为

1. $('p').contents().unwrap()将删除 p元素并将所有子节点添加到 p 的父节点元素，则集合有 3 个元素。
2. .wrap('<div />');将用 div 包裹所有三个元素标签

另一种可能的解决方案是

$('p').contents().unwrap().wrapAll('<div />');

演示:Fiddle