jQuery wrap()、wrapAll()和wrapInner()方法

在 jQuery 中，我们可以使用 wrap() 方法将所选元素用其他元素包裹起来。

语法：

$(A).wrap(B)

$(A).wrap(B) 表示将 A 元素用 B 元素包裹起来。

举例：

 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function () {

 $( #btn ).click(function () {

 $( p ).wrap( div >

默认情况下，预览效果如图 1 所示。




图 1：默认效果

我们点击【包裹】按钮后，预览效果如图 2 所示。




图2：点击按钮后的效果

jQuery wrapAll()方法

我们都知道，replaceWith() 和 replaceAll() 这两个方法的功能是相同的，只不过操作对象是颠倒的而已。但是这里大家要注意啦：wrap() 和 wrapAll() 这两个方法的功能是不相同的。

在 jQuery 中，wrap() 方法是将所有元素 单独 包裹，而 wrapAll() 方法是将所匹配的元素 一起 包裹。


 p C语言中文网 /p 

 p C语言中文网 /p 

 p C语言中文网 /p 

对于上面这段代码，如果使用$( p ).wrap( div /div )，则会得到以下结果：


 div p C语言中文网 /p div 

 div p C语言中文网 /p div 

 div p C语言中文网 /p div 

如果使用$( p ).wrapAll( div /div )，则会得到以下结果：


 div 

 p C语言中文网 /p 

 p C语言中文网 /p 

 p C语言中文网 /p 

 /div 

举例：


 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function () {

 $( #btn ).click(function () {

 $( p ).wrapAll( div >

默认情况下，预览效果如图 3 所示。




图 3：默认效果

我们点击【包裹】按钮后，此时预览效果如图 4 所示。




图 4：点击按钮后的效果

jQuery wrapInner()方法

在 jQuery 中，我们可以使用 wrapInner() 方法将所选元素的 内部所有元素以及文本 用其他元素包裹起来。

语法：

$(A).wrapInner(B)

$(A).wrapInner(B) 表示将 A 元素的 内部所有元素以及文本 用 B 元素包裹起来。注意，wrapInner() 方法不会包裹 A 元素本身。

举例


 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function () {

 $( #btn ).click(function () {

 $( p ).wrapInner( strong /strong 

 /script 

 /head 

 body 

 p C语言中文网 /p 

 p C语言中文网 /p 

 p C语言中文网 /p 

 input id= btn type= button value= 包裹 / 

 /body 

 /html 

默认情况下，预览效果如图 5 所示。




图 5：默认效果

我们点击【包裹】按钮后，预览效果如图 6 所示。




图 6：点击按钮后的效果

我们点击【包裹】按钮后，此时得到的 HTML 结构如下。


 p strong C语言中文网 /strong /p 

 p strong C语言中文网 /strong /p 

 p strong C语言中文网 /strong /p 

 
23803.html
 

 C语言html