Examples of wrapInner () method usage in jQuery
This article mainly introduces the usage of the wrapInner () method in jQuery. The example analyzes the functions, definitions, and usage skills of the wrapInner () method. For more information, see
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.
The Code is as follows:
$ (Selector). wrapInner (elem)
Parameter List:
| Parameters |
Description |
| Elem |
The DOM element used to wrap the target. |
Instance:
The 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.jb51.net/"/>
<Head>
<Title> feet home </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.
The Code is as follows:
$ (Selector). wrapInner (function)
Parameter List:
| Parameters |
Description |
| Function |
Returns the function used to wrap Matching Element Content. |
Instance:
The 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.jb51.net/"/>
<Head>
<Title> feet home </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.
The Code is as follows:
$ (Selector). wrapInner (html)
Parameter List:
| Parameters |
Description |
| Html |
The html Tag code used to enclose Matching Element Content. |
Instance:
The 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.jb51.net/"/>
<Head>
<Title> feet home </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.
