本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章，第3.15节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
如果你想用一个新的HTML元素封装一个已经存在的元素，jQuery提供了多个函数来帮你完成此项工作。每个函数的名字都包含了单词“wrap”，但它们的工作细节却不一样。代码清单3-15演示了wrap()最基本的用法。
代码清单3-15 包裹和解包段落元素
00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>The wrap() and unwrap() function</title> 05 <style> 06 /* 请将下列代码移至一个外部的 07 .css文件 */ 08 div.wrapper { 09 border: 1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 15 <h2>Paragraphs below are wrapped. Click the paragraphs to 16 test wrap()</h2> 17 18 <p>Paragraph to wrap</p> 19 <p>Paragraph to wrap</p> 20 21 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 22 23 <script> 24 // 请将下列代码移至一个外部的.js文件中 25 $(document).ready(function() { 26 27 $('p').wrap('<div class="wrapper"/>'); 28 29 $('p').click(function() { 30 $(this).unwrap('<div class="wrapper"/>'); 31 }); 32 33 }); 34 </script> 35 </body> 36 </html>在这个例子中，每个段落元素都被包裹在它自己的包裹div（wrapper div）里面。然后，使用unwrap()函数移除这些div。
代码清单3-16演示了wrapInner()函数的用法。
代码清单3-16 包裹段落元素的内容
00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>The wrapInner() function</title> 05 <style> 06 /* 请将下列代码移至一个外部的 07 .css文件 */ 08 div.wrapper { 09 border: 1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 15 <h2>The paragraphs below are modified with wrapInner()</h2> 16 17 <p>Paragraph to wrap</p> 18 <p>Paragraph to wrap</p> 19 20 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 21 22 <script> 23 //请将下列代码移至一个外部的.js文件中 24 $(document).ready(function() { 25 26 $('p').wrapInner('<div class="wrapper"/>'); 27 28 // 不能用unwrap()来解包: 29 // $('p').click(function() { 30 // $(this).unwrap('<div class="wrapper"/>'); 31 // }); 32 33 }); 34 </script> 35 </body> 36 </html>在这个例子中，段落元素自身没有被包裹。相反，段落元素的内容被包裹了。这意味着现在p元素包含了一个div。unwrap()函数在这个示例中是不能工作的。请记住将div放置在段落元素中不但是个坏习惯，而且还会导致你的HTML代码变得不规范，这个示例只是演示wrapInner()如何工作。
代码清单3-17演示了wrapAll()的用途。
代码清单3-17 包裹一组段落元素
00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>The wrapAll() function</title> 05 <style> 06 /* 请将下列代码移至一个外部的 07 .css文件 */ 08 div.wrapper { 09 border: 1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 15 <h2>Paragraphs below are wrapped with wrapAll() Click 16 the paragraphs to unwrap()</h2> 17 18 <p>Paragraph to wrap</p> 19 <p>Paragraph to wrap</p> 20 21 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 22 23 <script> 24 // 请将下列代码移至一个外部的.js文件中 25 $(document).ready(function() { 26 27 $('p').wrapAll('<div class="wrapper"/>'); 28 29 $('p').click(function(){ 30 $(this).unwrap('<div class="wrapper"/>'); 31 }); 32 33 }); 34 </script> 35 </body> 36 </html>在这个示例中，一个包裹div包含了所有选取的段落元素。unwrap()函数则移除这个包裹元素。
