在jQuery中,如果想要将某个元素用其他元素包裹起来,我们有以下3种方法。

  • (1)wrap()
  • (2)wrapAll()
  • (3)wrapInner()

一、wrap()

在jQuery中,我们可以将所选元素使用其他元素包裹起来。

语法:

$(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 style="background-color:orange;"></div>'); }); }) </script> </head> <body> <p>绿叶学习网</p> <p>绿叶学习网</p> <p>绿叶学习网</p> <input id="btn" type="button" value="包裹" /> </body> </html>

默认情况下,浏览器预览效果如图所示。

当我们点击【包裹】按钮后,浏览器预览效果如图所示。

二、wrapAll()

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

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

<p>绿叶学习网</p> <p>绿叶学习网</p> <p>绿叶学习网</p>

对于上面这段代码,如果使用$("p").wrap("<div></div>"),则会得到以下结果:

<div><p>绿叶学习网</p><div> <div><p>绿叶学习网</p><div> <div><p>绿叶学习网</p><div>

如果使用$("p").wrapAll("<div></div>"),则会得到以下结果:

<div> <p>绿叶学习网</p> <p>绿叶学习网</p> <p>绿叶学习网</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 style="background-color:orange;"></div>'); }); }) </script> </head> <body> <p>绿叶学习网</p> <p>绿叶学习网</p> <p>绿叶学习网</p> <input id="btn" type="button" value="包裹" /> </body> </html>

默认情况下,浏览器预览效果如图所示。

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

三、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>绿叶学习网</p> <p>绿叶学习网</p> <p>绿叶学习网</p> <input id="btn" type="button" value="包裹" /> </body> </html>

默认情况下,浏览器预览效果如图所示。

当我们点击【包裹】按钮后,浏览器预览效果如图所示。

分析:

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

<p><strong>绿叶学习网</strong></p> <p><strong>绿叶学习网</strong></p> <p><strong>绿叶学习网</strong></p>