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.
Copy Code code as follows:
$ (selector). Wrapinner (Elem)
parameter list:
| Parameters |
Describe |
| Elem |
The DOM element used to wrap the target. |
Instance:
Copy Code code 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> Cloud-dwelling community </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.
Copy Code code as follows:
$ (selector). Wrapinner (function)
parameter list:
| Parameters |
Describe |
| function |
Returns the function used to wrap the content of a matching element. |
Example:
Copy Code code 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> Cloud-dwelling community </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.
Copy Code code as follows:
$ (selector). Wrapinner (HTML)
parameter list:
| Parameters |
Describe |
| Html |
HTML markup code used to wrap the content of a matching element . |
Instance:
Copy Code code 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> Cloud-dwelling community </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.
This article is from: Ant Tribe http://www.softwhy.com/
