1. After function
Definition and Usage:
The After () method inserts the specified content after the selected element.
Grammar:
$ (selector). After (content)
Instance code:
<title>jquery after function instance-ke keeper </title><base target= "_blank"/>
<script type= "Text/javascript" src= "Http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js" ></ Script>
<style>
. yuanlai_keleyi_com{border:1px Solid black;padding:5px}
. A_keleyi_com{color:blue;} A{color:blue}
</style>
<body>
<br/>
<span class= "yuanlai_keleyi_com" > Collayi, this is the content of span, keleyi.com. <a href= "http://keleyi.com/a/bjac/2oncd079.htm" > Original </a></span>
<br/>
<BR/><button id= "after_keleyi_com" >after functions </button>
<br/><br/>
<a href= "http://keleyi.com/keleyi/phtml/jquery/13a.htm" >append functions </a> <a href= "http://keleyi.com/ Keleyi/phtml/jquery/13b.htm ">appendto function </a>
<script type= "Text/javascript" >
$ ("#after_ke" + "leyi_com"). Click (function () {
$ ("span"). After (' <a href= ' Http://keley ' + ' i.com ' class= ' a_kel ' + ' eyi_com ' > This is the after function plus go to content </a> ')
})
</script>
</body>
The results are as follows:
<span class= "yuanlai_keleyi_com" > Collayi, this is the content of span, keleyi.com. <a href= "http://keleyi.com/a/bjac/2oncd079.htm" > Original </a></span& gt;<a href= "http://keleyi.com "class=" a_keleyi_com "> This is the after function plus go to the content </a>
That is, the span tag has more than one a label behind it.
2. Append function
Definition and Usage:
The Append () method inserts the specified content at the end of the selected element (still inside).
Grammar:
$ (selector). Append (content)
Instance code:
<title>jquery append function Instance-ke keeper </title><base target= "_blank"/>
<script type= "Text/javascript" src= "Http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js" ></ Script>
<style>
. yuanlai_keleyi_com{border:1px Solid black;padding:5px}
. A_keleyi_com{color:blue;} A{color:blue}
</style>
<body>
<br/>
<span class= "yuanlai_keleyi_com" > Collayi, this is the content of span, keleyi.com. <a href= "http://keleyi.com/a/bjac/2oncd079.htm" > Original </a>. </span>
<br/>
<BR/><button id= "after_keleyi_com" >append functions </button>
<br/><br/>
<a href= "http://keleyi.com/keleyi/phtml/jquery/13.htm" >after functions </a> <a href= "http://keleyi.com/ Keleyi/phtml/jquery/13b.htm ">appendto function </a>
<script type= "Text/javascript" >
$ ("#after_ke" + "leyi_com"). Click (function () {
$ (". Yuanlai_ke" + "leyi_com"). Append (' <a href= ' Http://keley ' + ' i.com ' class= ' a_kel ' + ' eyi_com ' > This is the APPEND function plus go to the content </a> ')
})
</script>
</body>
The results are as follows:
<span class= "yuanlai_keleyi_com" > Collayi, this is the content of span, keleyi.com. <a href= "http://keleyi.com/a/bjac/2oncd079.htm" > Original </a><a href= "http://keleyi.com" class= "A_keleyi_ Com "> This is the after function plus go to the content </a></span>
That is, the span tag has one more a tag inside it.
3. Appendto function
Definition and Usage:
The AppendTo () method inserts the specified content at the end of the selected element (still inside).
Grammar:
$ (content). AppendTo (selector)
Instance code:
<title>jquery appendto function Instance-ke keeper </title><base target= "_blank"/>
<script type= "Text/javascript" src= "Http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js" ></ Script>
<style>
. yuanlai_keleyi_com{border:1px Solid black;padding:5px}
A{color:blue}
. A_keleyi_com{color:blue;}
</style>
<body>
<br/>
<span class= "yuanlai_keleyi_com" > Collayi, this is the content of span, keleyi.com. <a href= "http://keleyi.com/a/bjac/2oncd079.htm" > Original </a>. </span>
<br/>
<BR/><button id= "after_keleyi_com" >appendto functions </button>
<br/><br/>
<a href= "http://keleyi.com/keleyi/phtml/jquery/13a.htm" >append functions </a> <a href= "http://keleyi.com/ Keleyi/phtml/jquery/13.htm ">after function </a>
<script type= "Text/javascript" >
$ ("#after_ke" + "leyi_com"). Click (function () {
$ (' <a href= ' Http://keley ' + ' i.com ' class= ' a_kel ' + ' eyi_com ' > This is appendTo function plus go to content </a> '). AppendTo (". Yuanlai_k "+" eleyi_com ")
The notation is incorrect: $ (". Yuanlai_k" + "eleyi_com"). AppendTo (' <a href= ' Http://keley ' + ' i.com ' class= ' a_kel ' + ' eyi_com ' > This is the Appendto function plus go to the content </a> ')
})
</script>
</body>
The results are as follows:
<span class= "yuanlai_keleyi_com" > Collayi, this is the content of span, keleyi.com. <a href= "http://keleyi.com/a/bjac/2oncd079.htm" > Original </a><a href= "http://keleyi.com" class= "A_keleyi_ Com "> This is the after function plus go to the content </a></span>
That is, the span tag has one more a tag inside it.
The effect is the same as the APPEND function, except that they are written in the opposite way.
The difference between the JQ function after, append, appendto