jQuery | wrapInner（）及其示例-yiteyi-C++库

wrapInner（）方法是jQuery中的一个内置方法，用于将HTML元素包装在每个选定元素的内容周围。

null

语法：

$(selector).wrapInner(wrap_element, function(index))

参数： 该函数接受两个参数，如下所述：

包裹元素： 它是强制参数，用于指定HTML元素以环绕选定元素的内容
功能： 它是可选参数，用于指定返回包装元素的函数。
- 索引： 它返回元素的索引。

返回值： 此方法返回所选元素及其应用的更改。

下面的示例演示了jQuery中的wrapInner（）方法：

例1： 此示例不包含可选参数。

                     <!DOCTYPE html>                   
                     <                               html                               >                   
                                         <                               head                               >                   
                                         <                               script                               src                               =                   
                                         "                       https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                      "                               >                   
                                         </                               script                               >                   
                             
                                         <!-- jQuery code to show the working of this method -->                   
                                         <                               script                               >                   
                                         $(document).ready(function() {                   
                                         $("div").click(function() {                   
                                         $(this).wrapInner("<                               b                               ></                               b                               >").css(                   
                                         "background-color", "green");                   
                                         });                   
                                         });                   
                                         </                               script                               >                   
                                         <                               style                               >                   
                                         body {                   
                                         width: 200px;                   
                                         padding: 20px;                   
                                         height: 20px;                   
                                         border: 2px solid green;                   
                                         }                   
                                         </                               style                               >                   
                                         </                               head                               >                   
                                         <                               body                               >                   
                                         <!-- click on this div and see the change -->                   
                                         <                               div                               >Welcome to GeeksforGeeks!</                               div                               >                   
                             
                                         </                               body                               >                   
                     </                               html                               >                   

输出： 在单击div元素之前：图片[1]-jQuery | wrapInner（）及其示例-yiteyi-C++库单击div元素后：图片[2]-jQuery | wrapInner（）及其示例-yiteyi-C++库

例2：

                     <!DOCTYPE html>                   
                     <                               html                               >                   
                                         <                               head                               >                   
                                         <                               script                               src                               =                   
                                         "                       https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                      "                               >                   
                                         </                               script                               >                   
                             
                                         <!-- jQuery code to show the working of this method -->                   
                                         <                               script                               >                   
                                         $(document).ready(function() {                   
                                         $("div").click(function() {                   
                                         $("span").wrapInner(function(n) {                   
                                         return "<                               i                               ></                               i                               >";                   
                                         });                   
                                         });                   
                                         });                   
                                         </                               script                               >                   
                                         <                               style                               >                   
                                         body {                   
                                         width: 250px;                   
                                         padding: 20px;                   
                                         height: 20px;                   
                                         font-size: 20px;                   
                                         border: 2px solid green;                   
                                         }                   
                                         </                               style                               >                   
                                         </                               head                               >                   
                                         <                               body                               >                   
                                         <!-- click on this div and see the change -->                   
                                         <                               div                               >Welcome to <                               span                               >GeeksforGeeks!</                               span                               ></                               div                               >                   
                                         </                               body                               >                   
                     </                               html                               >                   