This article mainly introduced jquery Wrapinner () method usage, the example analyzes the Wrapinner () method function, the definition and the wrapping matching element's use skill, needs the friend to be possible to refer to under
-->
This example describes the use of the Wrapinner () method in jquery. Share to everyone for your reference. The specific analysis is as follows:
This method wraps the content of the matched element with the specified HTML content or element.
Grammar one:
Wraps the contents of the matching element with the specified DOM element.
The code is as follows: $ (selector). Wrapinner (Elem)
Parameter list:
| Parameters |
Describe |
| 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 ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Script House </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>
<body>
<div> This is the content of the div that will be wrapped </div>
<div> This is the content of the div that will be wrapped </div>
<button> use div to wrap each paragraph </button>
</body>
Syntax Two:
Returns the element used by the function to wrap the content of the element.
The code is as follows: $ (selector). Wrapinner (function)
Parameter list:
| Parameters |
Describe |
| function |
Returns the function used to wrap the content of a matching element. |
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 ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Script House </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>
<body>
<div> This is the content of the div that will be wrapped </div>
<div> This is the content of the div that will be wrapped </div>
<button> use div to wrap each paragraph </button>
</body>
Syntax Three:
Wraps the contents of an element with HTML tag code.
The code is as follows: $ (selector). Wrapinner (HTML)
Parameter list:
| Parameters |
Describe |
| Html |
HTML markup code used to wrap the content of a matching element. |
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 ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Script House </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>
<body>
<div> This is the content of the div that will be wrapped </div>
<div> This is the content of the div that will be wrapped </div>
<button> use div to wrap each paragraph </button>
</body>
I hope this article will help you with your jquery programming.
