在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:henryiv@king.co.uk">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
 
prependTo()：把所有匹配的元素前置到另一个、指定的元素元素集合中。（在这个例子中当点击back to top 时会跳到这个页面最开始的位置   相当于锚）