This example describes the use of the Add () method in jquery. Share to everyone for your reference. The specific analysis is as follows:
This function adds an element that matches an expression in a matching element.
The result returned by the Add () function will always be sorted in the order in which the elements appear in the HTML document, not simply added.
Grammar:
Grammar one:
Copy Code code as follows:
$ (selector). Add (Expr,context)
| Parameters |
Describe |
| Expr |
Optional. The selector string used to match the element. |
| Context |
Optional. As a set of DOM elements to find, a document, or a JQuery object. |
Instance:
Example one:
Adds a span element to the matching elements and sets their font color to green.
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" >
Ul
{
width:200px;
height:200px;
BORDER:1PX solid blue;
}
Div
{
height:300px;
}
</style>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("P"). Add ("span"). CSS ("Color", "green")
})
</script>
<body>
<div>
<ul>
<li>
<p> I am p</p>
</li>
<span> I am span</span>
</ul>
<span> I am span</span> </div>
</body>
Example two:
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" >
Ul
{
width:200px;
height:200px;
BORDER:1PX solid blue;
}
Div
{
height:300px;
}
</style>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("P"). Add ("Span", "UL"). CSS ("Color", "green")
})
</script>
<body>
<div>
<ul>
<li>
<p> I am p</p>
</li>
<span> I am span</span>
</ul>
<span> I am span</span> </div>
</body>
Syntax Two:
Copy Code code as follows:
$ (selector). Add (Element)
parameter list:
| Parameters |
Describe |
| Element |
Optional. The DOM element or jquery element that was added . |
Instance:
Example one:
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" >
Ul
{
width:200px;
height:200px;
BORDER:1PX solid blue;
}
Div
{
height:300px;
}
</style>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("P"). Add (document.getElementById ("MySpan")). CSS ("Color", "green")
})
</script>
<body>
<div>
<ul>
<li>
<p> I am p</p>
</li>
<span id= "MySpan" > I am span</span>
</ul>
<span> I am span</span> </div>
</body>
Example two:
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" >
Ul
{
width:200px;
height:200px;
BORDER:1PX solid blue;
}
Div
{
height:300px;
}
</style>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("P"). Add ($ ("#myspan"). CSS ("Color", "green")
})
</script>
<body>
<div>
<ul>
<li>
<p> I am p</p>
</li>
<span id= "MySpan" > I am span</span>
</ul>
<span> I am span</span> </div>
</body>
Syntax Three:
Copy Code code as follows:
parameter list:
| Parameters |
Describe |
| Html |
Optional. The HTML code fragment that was added . |
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>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
Alert ($ ("P"). Add ("<span> newly added </span>"). length);
})
</script>
<body>
<div>
<ul>
<li>
<p> I am p</p>
</li>
</ul>
</body>
I hope this article will help you with your jquery programming.
