用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

<html xmlns="http://www.w3.org/1999/xhtml">
2

<head runat="server">
3

<title></title>
4

</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

<%-- <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

<%-- <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

<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—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 时会跳到这个页面最开始的位置相当于锚）

来源：https://www.cnblogs.com/ruibo/archive/2009/06/29/1513213.html

标签

新元素