用JQ插入新元素

在JQ中提供了两种将元素插入到其他元素前面的方法：.insertBefore()和.before()。这两种方法作用相同，只是连缀的方式不同（即 位置不同）

            例：before（content） 在每个匹配的元素之前插入内容。

                  content：插入到每个目标前的内容。

                  $(A).before(B); ——把B插入到A前

                  insertBefore（expr）：把所有匹配的元素插入到另一个、指定的元素集合前。（与before()

                                                用法相反） 

                  expr（String）:用于匹配元素的JQ表达式

                 $(A).insertBefore(B); ——把A插入到B前面

insertAftet（）和after（）：将元素插入到其他元素后面。（用法与以上两种方法基本相同）

以下是代码演示 

HTML

 

  1 < html  xmlns ="http://www.w3.org/1999/xhtml" >
  2 < head  runat ="server" >
  3      < title ></ title >
  4
  5      < script  type ="text/javascript"  src ="JS/jquery.js" ></ script >
  6      < script  type ="text/javascript"  src ="JS/alice.js" ></ script >
  7      < link  href ="css/alice.css"  rel ="stylesheet"  type ="text/css"   />
  8     
  9 </ head >
 10 < body >
 11      < form  id ="form1"  runat ="server" >
 12          < div  id ="container" >
 13             < h1 > Through the LookingGlass </ h1 >
 14             < div  class ="author" > by Lewis Carroll </ div >  
 15             < div  class ="chapter"  id ="chapter1" ></ div >
 16             < h2  class ="chaptertitle" > 1.LookingGlass House </ h2 >
 17       <% --      <p>There was a book lying near Alice on the table,and while she sat watching the White King-- %>
 18                < span  class ="spoken" > I don't know, </ span > she said to herself. </ p >
 19              <% --  <p>It was like this.</p>-- %>
 20                < div  class ="poem" >
 21                  < h3  class ="poemstanza" > YKCOWREBBAJ </ h3 >
 22                      < div  class ="poemstanza" >
 23                          < div > sevot yhtils eht dna,gillirb sawT' </ div >
 24                          < div > ;ebaw eht ni elbmig dna eryg diD </ div >
 25                          < div > ,sevogorob eht erew ysmim llA </ div >
 26                          < div > .ebargtuo shtar emom eht dna </ div >
 27                      </ div >
 28                </ div >
 29               
 30              <% --  <p>There was a book lying near Alice on the table,and while she sat watching the White King
 31              <span class="spoken">I don't know,</span>she said to herself.</p>--%>
 32              
 33              <%-- <p>It was like this.</p>-- %>
 34                < div  class ="poem" >
 35                  < h3  class ="poemstanza" > YKCOWREBBAJ </ h3 >
 36                      < div  class ="poemstanza" >
 37                          < div > sevot yhtils eht dna,gillirb sawT' </ div >
 38                          < div > ;ebaw eht ni elbmig dna eryg diD </ div >
 39                          < div > ,sevogorob eht erew ysmim llA </ div >
 40                          < div > .ebargtuo shtar emom eht dna </ div >
 41                      </ div >
 42                </ div >
 43          </ div >
 44         
 45          < ul  id ="selectedplays" >
 46              < li > Comedies
 47                  < ul >
 48                      < li >< a  href ="http://www.mysite.com/asyoulikeit/" > As You Like It </ a ></ li >
 49                      < li > All's Well That Ends Well </ li >
 50                      < li > A Midsummer Night's Dream </ li >
 51                      < li > Twelfth Night </ li >
 52                  </ ul >
 53              </ li >
 54              < li > Tragedies
 55                  < ul >
 56                      < li >< a  href ="hamlet.pdf" > Hamlet </ a ></ li >
 57                      < li > Macbeth </ li >
 58                      < li > Romeo and Juliet </ li >
 59                  </ ul >
 60              </ li >  
 61              < li > Histories
 62                  < ul >
 63                      < li > Henry IV( < a  href ="mailto:[email protected]" > email </ a > ) </ li >
 64                           < ul >
 65                              < li > Part I </ li >
 66                              < li > Part II </ li >
 67                           </ ul >
 68                       < li >< a  href ="http://www.shakespeare.co.uk/henryv.htm" > Henry V </ a ></ li >
 69                       < li > Richard II </ li >
 70                  </ ul >
 71              </ li >
 72          </ ul >
 73          < br  />
 74          < table >
 75             < tr >
 76              < th > Title </ th >
 77              < th > Category </ th >
 78              < th > Year Published </ th >
 79             </ tr >
 80             < tr >
 81              < td > As You Like It </ td >
 82              < td > Comedy </ td >
 83              < td ></ td >
 84             </ tr >
 85             < tr >
 86              < td > All's Well that Ends Well </ td >
 87              < td > Comedy </ td >
 88              < td > 1601 </ td >
 89             </ tr >
 90             < tr >
 91              < td > Hamlet </ td >
 92              < td > Tragedy </ td >
 93              < td > 1599 </ td >
 94             </ tr >
 95             < tr >
 96              < td > Macbeth </ td >
 97              < td > Tragedy </ td >
 98              < td > 1064 </ td >
 99             </ tr >
100             < tr >
101              < td > Romeo and Juliet </ td >
102              < td > Tragedy </ td >
103              < td > 1606 </ td >
104             </ tr >
105             < tr >
106              < td > Henry IV,Part I </ td >
107              < td > History </ td >
108              < td > 1595 </ td >
109             </ tr >
110             < tr >
111              < td > Henry V </ td >
112              < td > History </ td >
113              < td > 1599 </ td >
114             </ tr >
115          </ table >
116         
117         <% -- <div id="switcher">
118            <h3>Style Switcher</h3>
119            <div class="button selected" id="switcher-normal">Normal</div>
120            <div class="button" id="switcher-narrow">Narrow Column</div>
121            <div class="button" id="switcher-large">Large Print</div>
122        </div>-- %>
123         
124          < div  class ="foo" >
125              < span  class ="bar" >< a  href ="http://www.example.com/" > The quick brown fox jumps over the lazy dog. </ a ></ span >
126              <% --<p>How razorback-jumping frogs can level six piqued gymnasts!</p>-- %>
127          </ div >
128         
129          < div  id ="switcher" >
130              < div  class ="label" > Style Switcher </ div >
131              < div  class ="button"  id ="switcher-large" > Increase Text Size </ div >
132              < div  class ="button"  id ="switcher-small" > Decrease Text Size </ div >
133          </ div >
134          < div  class ="speech" >
135             <% -- <p>Fourscore and seven years ago our fathers brought forth on this continent a new nation,conceived in liberty,
136                and dedicated to the proposition that all men are created equal.<span class="more"></span></p>
137            <p>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated,
138               can long</p>
139            <p>The brave men, living and dead, who struggled here have consecrated it ,far above our poor power to add or detract</p>
140            <p>It is rather for us to be here dedicated to the great task remaining before us&mdash;that from these honored dead we take</p>-- %>
141          </ div >
142         
143          < h1  id ="f-title" > Flatland:A Romance of Many Dimensions </ h1 >
144          < div  id ="f-author" > by Edwin A. Abbott </ div >
145          < h2 > Part 1,Section 3 </ h2 >
146          < h3  id ="f-subtitle" > Concerning the Inhabitants of Flatland </ h3 >
147          < div  id ="excerpt" > an excerpt </ div >
148         
149          < div  class ="chapter" >
150              < p  class ="square" > Our Professional Men and Gentlemen are Squares(to which class I Myselt belong) and Five-Sided Figures or 
151                  < a  href ="http://en.wikipedia.org/wiki/Pentagon" > Pentagons </ a ></ p >
152               < p  class ="nobility hexagon" > Next above these come the Nobility,of whom there are  < a  href ="http://en.wikipedia.org/wiki/Hexagon" > Hexagon </ a > and from thence < a  href ="http://en.wikipedia.org/wiki/Polygon" > Polygonal </ a > ,or many-sided.Finally when the < a  href ="http://en.wikipedia.org/wiki/Circle" > Circle </ a ></ p >
153               < p >< span  class ="pull-quote" > It is a  < span  class ="drop" > Law of Nature> </ span > With us that a male child < strong > one more side </ strong > than his father </ span > ,so that each generation shall rise </ p >
154          </ div >
155      </ form >
156 </ body >

 

alice.js

Code
$(document).ready(function(){
    $('<a href="#top">back to top</a>').insertAfter('div.chapter p');<==>$('div.chapter p').after('<a href="#top">back to top</a>');//等价的
    $('<a id="top"></a>').prependTo('body');
});

 

prependTo()： 把所有匹配的元素前置到另一个、指定的元素元素集合中。（在这个例子中当点击back to top 时会跳到这个页面最开始的位置   相当于锚）