如何在现有div中添加HTML元素，但覆盖内容？

Question

例如我这样的HTML：

<div class='title-post'>The content</div>

现在，我想使用Jquery添加元素以获得如下结果：

<div class='title-post'><span>The content</span></div>

这意味着我添加了<span></span>内容。

我如何使用Jquery来做到这一点？

感谢您的帮助。

Answer 1

使用JQuery API wrapInner：http://api.jquery.com/wrapInner/

演示 http://jsfiddle.net/rp3bY/

代码

$('.title-post').wrapInner('<span>');

Answer 2

一行jQuery：

$('.title-post').html($('<span />').text($('.title-post').text()));

小提琴：http://jsfiddle.net/P6B8g/