Home > Developer > JavaScript
Examples of wrapInner () method usage in jQuery, jquerywrapinner
This document describes the wrapInner () method in jQuery. Share it with you for your reference. The specific analysis is as follows:
This method wraps the matching element content with the specified HTML content or element.
Syntax 1:
Enclose the content of the matching element with the specified DOM element.
Copy codeThe Code is as follows: $ (selector). wrapInner (elem)
Parameter List:
| Parameters | Description |
| Elem | The DOM element used to wrap the target. |
Instance:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Head>
<Title> helping customers </title>
<Style type = "text/css">
Div
{
Width: 200px;
Height: 200px;
Border: 1px solid blue;
}
P
{
Width: 150px;
Height: 150px;
Border: 1px solid red;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). wrapInner (document. createElement ("p "));
});
});
</Script>
</Head>
<Body>
<Div> This is the content of the div and will be wrapped </div>
<Div> This is the content of the div and will be wrapped </div>
<Button> wrap each paragraph with a div </button>
</Body>
</Html>
Syntax 2:
Return the elements used to wrap matching element content using the function.
Copy codeThe Code is as follows: $ (selector). wrapInner (function)
Parameter List:
| Parameters | Description |
| Function | Returns the function used to wrap Matching Element Content. |
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Head>
<Title> helping customers </title>
<Style type = "text/css">
Div
{
Width: 200px;
Height: 200px;
Border: 1px solid blue;
}
P
{
Width: 150px;
Height: 150px;
Border: 1px solid red;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). wrapInner (function (){
Return "<p> </p>"
});
});
});
</Script>
</Head>
<Body>
<Div> This is the content of the div and will be wrapped </div>
<Div> This is the content of the div and will be wrapped </div>
<Button> wrap each paragraph with a div </button>
</Body>
</Html>
Syntax 3:
Use html Tag code to enclose the content of matching elements.
Copy codeThe Code is as follows: $ (selector). wrapInner (html)
Parameter List:
| Parameters | Description |
| Html | The html Tag code used to enclose Matching Element Content. |
Instance:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Head>
<Title> helping customers </title>
<Style type = "text/css">
Div
{
Width: 200px;
Height: 200px;
Border: 1px solid blue;
}
P
{
Width: 150px;
Height: 150px;
Border: 1px solid red;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). wrapInner ("<p> </p> ");
});
});
</Script>
</Head>
<Body>
<Div> This is the content of the div and will be wrapped </div>
<Div> This is the content of the div and will be wrapped </div>
<Button> wrap each paragraph with a div </button>
</Body>
</Html>
I hope this article will help you with jQuery programming.
This article
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
