【jQuery】使用wrap()和wrapInner()方法包裹元素和内容

wrap()

和

wrapInner()

方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：

$(selector).wrap(wrapper)

和

$(selector).wrapInner(wrapper)

参数selector为被包裹的元素，wrapper参数为包裹元素的格式。

例如，调用

wrap()

方法，将<span>用<div>元素包裹起来，如下图所示：





在浏览器中显示的效果：





从图中可以看出，红色区域的<span>元素被蓝色边框的<div>元素通过

wrap()

方法包裹起来。

如果用wrapInner()：

<script type="text/javascript">

$(".red").wrapInner("<i></i>");

</script>

只是把.red的元素变成了斜体，相当于：

<span class="red" title='hi'><i>我的身体有点歪</i></span>