Jquery append()總結

append(content)   

Javascript代碼  

1. /** 
2.  * 向每一個匹配的元素內部追加內容。 
3.  * 這個操做與對指定的元素執行 appendChild 方法，將它們添加到文檔中的狀況相似。 
4.  * 
5.  * @content(String, Element, jQuery) 要追加到目標中的內容 
6.  * @return Object 
7.  * @owner jQuery Object 
8.  */  
9. function append(content);  
10.   
11. // 例子：向全部段落中追加一些HTML標記。  
12. <p>I would like to say: </p>  
13.   
14. $("p").append("<b>Hello</b>") -> [ <p>I would like to say: <b>Hello</b></p> ]  

    ●  appendTo(content)     

Javascript代碼  

1. /** 
2.  * 把全部匹配的元素追加到另外一個、指定的元素元素集合中。 
3.  * 實際上，使用這個方法是顛倒了常規的 $(A).append(B) 的操做，即不是把 B 追加到 A 中，而是把 A  
4.  * 追加到 B 中。 
5.  * 
6.  * @content(String) 用於被追加的內容 
7.  * @return Object 
8.  * @owner jQuery Object 
9.  */  
10. function appendTo(content);  
11.   
12. // 例子：把全部段落追加到 ID 值爲 "foo" 的元素中。  
13. <p>I would like to say: </p>  
14. <div id="foo"></div>  
15.   
16. $("p").appendTo("#foo") -> <div id="foo"><p>I would like to say: </p></div>  

    ●  prepend(content)     

Javascript代碼  

1. /** 
2.  * 向每一個匹配的元素內部前置內容。這是向全部匹配元素內部的開始處插入內容的最佳方式。 
3.  * 
4.  * @content(String, Element, jQuery) 要插入到目標元素內部前端的內容 
5.  * @return Object 
6.  * @owner jQuery Object 
7.  */  
8. function prepend(content);  
9.   
10. // 例子一：向全部段落中前置一些 HTML 標記代碼。  
11. <p>I would like to say: </p>  
12.   
13. $("p").prepend("<b>Hello</b>") -> [ <p><b>Hello</b>I would like to say: </p> ]  
14.   
15. // 例子二：將一個 DOM 元素前置入全部段落  
16. <p>I would like to say: </p>  
17. <p>I would like to say: </p>  
18. <b class="foo">Hello</b>  
19. <b class="foo">Good Bye</b>  
20.   
21. $("p").prepend( $(".foo")[0] ) ->   
22.     <p><b class="foo">Hello</b>I would like to say: </p>  
23.     <p><b class="foo">Hello</b>I would like to say: </p>  
24.     <b class="foo">Hello</b>  
25.     <b class="foo">Good Bye</b>   
26.       
27. // 例子三：向全部段落中前置一個 jQuery 對象(相似於一個 DOM 元素數組)。  
28. <p>I would like to say: </p><b>Hello</b>  
29.   
30. $("p").prepend( $("b") ) -> <p><b>Hello</b>I would like to say: </p>  

    ●  prependTo(content)     

Javascript代碼  

1. /** 
2.  * 把全部匹配的元素前置到另外一個、指定的元素元素集合中。 
3.  * 實際上，使用這個方法是顛倒了常規的 $(A).prepend(B) 的操做，即不是把 B 前置到 A 中，而是把  
4.  * A 前置到 B 中。 
5.  * 
6.  * @content(String) 用於匹配元素的 jQuery 表達式 
7.  * @return Object 
8.  * @owner jQuery Object 
9.  */  
10. function prependTo(content);  
11.   
12. // 例子一：把全部段落追加到 ID 值爲 foo 的元素中。  
13. <p>I would like to say: </p>  
14. <div id="foo"></div>  
15.   
16. $("p").prependTo("#foo") -> <div id="foo"><p>I would like to say: </p></div>  

    ●  after(content)     

Javascript代碼  

1. /** 
2.  * 在每一個匹配的元素以後插入內容。 
3.  * 
4.  * @content(String, Element, jQuery) 插入到每一個目標後的內容 
5.  * @return Object 
6.  * @owner jQuery Object 
7.  */  
8. function after(content);  
9.   
10. // 例子一：在全部段落以後插入一些 HTML 標記代碼。  
11. <p>I would like to say: </p>  
12.   
13. $("p").after("<b>Hello</b>") -> <p>I would like to say: </p><b>Hello</b>  
14.   
15. // 例子二：在全部段落以後插入一個 DOM 元素。  
16. <b id="foo">Hello</b><p>I would like to say: </p>  
17.   
18. $("p").after( $("#foo")[0] ) -> <p>I would like to say: </p><b id="foo">Hello</b>  
19.   
20. // 例子三：在全部段落中後插入一個 jQuery 對象(相似於一個DOM元素數組)。  
21. <b>Hello</b><p>I would like to say: </p>  
22.   
23. $("p").after( $("b") ) -> <p>I would like to say: </p><b>Hello</b>  

    ●  before(content)     

Javascript代碼  

1. /** 
2.  * 在每一個匹配的元素以前插入內容。 
3.  * 
4.  * @content(String, Element, jQuery) 插入到每一個目標前的內容 
5.  * @return Object 
6.  * @owner jQuery Object 
7.  */  
8. function before(content);  
9.   
10. // 例子一：在全部段落以前插入一些 HTML 標記代碼。  
11. <p>I would like to say: </p>  
12.   
13. $("p").before("<b>Hello</b>") -> [ <b>Hello</b><p>I would like to say: </p> ]  
14.   
15. // 例子二：在全部段落以前插入一個元素。  
16. <p>I would like to say: </p>  
17. <b id="foo">Hello</b>  
18.   
19. $("p").before( $("#foo")[0] ) -> <b id="foo">Hello</b><p>I would like to say: </p>  
20.   
21. // 例子三：在全部段落中前插入一個 jQuery 對象(相似於一個DOM元素數組)。  
22. <p>I would like to say: </p><b>Hello</b>  
23.   
24. $("p").before( $("b") ) -> <b>Hello</b><p>I would like to say: </p>  

    ●  insertAfter(content)     

Javascript代碼  

1. /** 
2.  * 把全部匹配的元素插入到另外一個，指定的元素元素集合的後面。 
3.  * 實際上，使用這個方法是顛倒了常規的 $(A).after(B) 的操做，即不是把 B 插入到 A 後面，而是把 A  
4.  * 插入到 B 後面。 
5.  * 
6.  * @content(String) 用於匹配元素的 jQuery 表達式 
7.  * @return Object 
8.  * @owner jQuery Object 
9.  */  
10. function insertAfter(content);  
11.   
12. // 例子一：把全部段落插入到一個元素以後。與 $("#foo").after("p") 相同。  
13. <p>I would like to say: </p>  
14. <div id="foo">Hello</div>  
15.   
16. $("p").insertAfter("#foo") -> <div id="foo">Hello</div><p>I would like to say: </p>  

    ●  insertBefore(content)     

Javascript代碼  

1. /** 
2.  * 把全部匹配的元素插入到另外一個、指定的元素元素集合的前面。 
3.  * 實際上，使用這個方法是顛倒了常規的 $(A).before(B) 的操做，即不是把 B 插入到 A 前面，而是把 A  
4.  * 插入到 B 前面。 
5.  * 
6.  * @content(String) 用於匹配元素的 jQuery 表達式 
7.  * @return Object 
8.  * @owner jQuery Object 
9.  */  
10. function insertBefore(content);  
11.   
12. // 例子：把全部段落插入到一個元素以前。與 $("#foo").before("p") 相同。  
13. <div id="foo">Hello</div>  
14. <p>I would like to say: </p>  
15.   
16. $("p").insertBefore("#foo") -> <p>I would like to say: </p><div id="foo">Hello</div>  

Javascript代碼  

1. <span style="font-family: Simsun; font-style: normal; font-variant: normal; font-weight: normal; font-size: medium; line-height: normal; color: #000000; text-indent: 0px; white-space: normal; letter-spacing: normal; border-collapse: separate;" class="Apple-style-span"><span style="font-size: 12px; line-height: 18px; font-family: Arial,sans-serif,Helvetica,Tahoma; text-align: left;" class="Apple-style-span"><strong style="font-weight: bold;"><span style="color: #345286;">●  wrap(elem)</span>  
2. </strong>  
3. <span class="Apple-converted-space"> </span>  
4.   
5. <pre class="javascript" name="code">/** 
6.  * 把全部匹配的元素用其餘元素的結構化標記包裝起來。 
7.  * 
8.  * @elem(Element) 用於包裝目標元素的 DOM 元素 
9.  * @return Object 
10.  * @owner jQuery Object 
11.  */  
12. function wrap(elem);  
13.   
14. // 例子：用 ID 是 "content" 的 div 將每個段落包裹起來。  
15. <p>Test Paragraph.</p>  
16. <div id="content"></div>  
17.   
18. $("p").wrap(document.getElementById('content')) ->   
19.     <div id="content"><p>Test Paragraph.</p></div><div id="content"></div>  
20. </pre>  
21. <br><br><strong style="font-weight: bold;"><span style="color: #345286;">    ●  wrapAll(elem)</span>  
22. </strong>  
23. <span class="Apple-converted-space"> </span>  
24. <br><pre class="javascript" name="code">/** 
25.  * 將全部匹配的元素用單個元素包裹起來。這於 wrap(elem) 是不一樣的，wrap(elem) 爲每個匹配的元素都 
26.  * 包裹一次。 
27.  * 
28.  * @elem(Element) 用於包裝目標元素的 DOM 元素 
29.  * @return Object 
30.  * @owner jQuery Object 
31.  */  
32. function wrapAll(elem);  
33.   
34. // 例子：用一個生成的 div 將全部段落包裹起來。  
35. <p>Hello</p>  
36. <p>cruel</p>  
37. <p>World</p>  
38.   
39. $("p").wrapAll(document.createElement("div")) -> <div><p>Hello</p><p>cruel</p><p>World</p></div>  
40. </pre>  
41. <br><br><strong style="font-weight: bold;"><span style="color: #345286;">    ●  wrapInner(elem)</span>  
42. </strong>  
43. <span class="Apple-converted-space"> </span>  
44. <br><pre class="javascript" name="code">/** 
45.  * 將每個匹配的元素的子內容(包括文本節點)用 DOM 元素包裹起來。 
46.  * 
47.  * @elem(Element) 用於包裝目標元素的 DOM 元素 
48.  * @return Object 
49.  * @owner jQuery Object 
50.  */  
51. function wrapInner(elem);  
52.   
53. // 例子：把全部段落內的每一個子內容加粗。  
54. <p>Hello</p>  
55. <p>cruel</p>  
56. <p>World</p>  
57.   
58. $("p").wrapInner(document.createElement("b")) ->   
59.     <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>   
60. </pre>  
61. <br><br><strong style="font-weight: bold;"><span style="color: #345286;">    ●  wrap(html)</span>  
62. </strong>  
63. <span class="Apple-converted-space"> </span>  
64. <br><pre class="javascript" name="code">/** 
65.  * 把全部匹配的元素用其餘元素的結構化標記包裹起來。 
66.  * 這種包裝對於在文檔中插入額外的結構化標記最有用，並且它不會破壞原始文檔的語義品質。 
67.  *  
68.  * 這個函數的原理是檢查提供的 html(它是由所提供的 HTML 標記代碼動態生成的)，並在它的代碼結構中 
69.  * 找到最上層的祖先元素 － 這個祖先元素就是包裹元素。 
70.  *  
71.  * 當 HTML 標記代碼中的元素包含文本時沒法使用這個函數。所以，若是要添加文本應該在包裹完成以後再行添加。 
72.  * 
73.  * @html(String) HTML 標記代碼字符串，用於動態生成元素幷包裹目標元素 
74.  * @return Object 
75.  * @owner jQuery Object 
76.  */  
77. function wrap(html);  
78.   
79. // 例子：把全部的段落用一個新建立的 div 包裹起來。  
80. <p>Test Paragraph.</p>  
81.   
82. $("p").wrap("<div class='wrap'></div>") -> <div class="wrap"><p>Test Paragraph.</p></div>  
83. </pre>  
84. <br><br><strong style="font-weight: bold;"><span style="color: #345286;">    ●  wrapAll(html)</span>  
85. </strong>  
86. <span class="Apple-converted-space"> </span>  
87. <br><pre class="javascript" name="code">/** 
88.  * 將全部匹配的元素用單個元素包裹起來。這於 wrap(html)是不一樣的，wrap(html) 爲每個匹配的元素都 
89.  * 包裹一次。 
90.  * 
91.  * 這種包裝對於在文檔中插入額外的結構化標記最有用，並且它不會破壞原始文檔的語義品質。 
92.  * 
93.  * 這個函數的原理是檢查提供的第一個元素並在它的代碼結構中找到最上層的祖先元素 － 這個祖先元素就 
94.  * 是包裝元素。 
95.  * 
96.  * @html(String) HTML 標記代碼字符串，用於動態生成元素幷包裝目標元素 
97.  * @return Object 
98.  * @owner jQuery Object 
99.  */  
100. function wrapAll(html);  
101.   
102. // 例子：用一個生成的 div 將全部段落包裹起來。  
103. <p>Hello</p>  
104. <p>cruel</p>  
105. <p>World</p>  
106.   
107. $("p").wrapAll("<div></div>") -> <div><p>Hello</p><p>cruel</p><p>World</p></div>  
108. </pre>  
109. <br><br><strong style="font-weight: bold;"><span style="color: #345286;">    ●  wrapInner(html)</span>  
110. </strong>  
111. <span class="Apple-converted-space"> </span>  
112. <br><pre class="javascript" name="code">/** 
113.  * 將每個匹配的元素的子內容(包括文本節點)用一個 HTML 結構包裹起來。 
114.  * 
115.  * 這個函數的原理是檢查提供的第一個元素(它是由所提供的 HTML 標記代碼動態生成的)，並在它的代碼結構中 
116.  * 找到最上層的祖先元素 - 這個祖先元素就是包裝元素。 
117.  * 
118.  * @html(String) HTML 標記代碼字符串，用於動態生成元素幷包裝目標元素 
119.  * @return Object 
120.  * @owner jQuery Object 
121.  */  
122. function wrapInner(html);  
123.   
124. // 例子：把全部段落內的每一個子內容加粗。  
125. <p>Hello</p>  
126. <p>cruel</p>  
127. <p>World</p>  
128.   
129. $("p").wrapInner("<b></b>") -> <p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>  
130. </pre>  
131. <br><br><strong style="font-weight: bold;"><span style="color: #345286;">    ●  replaceAll(selector)</span>  
132. </strong>  
133. <span class="Apple-converted-space"> </span>  
134. <br><pre class="javascript" name="code">/** 
135.  * 用匹配的元素替換掉全部 selector 匹配到的元素。 
136.  * 
137.  * @selector(Selector) 用於查找所要被替換的元素 
138.  * @return Object 
139.  * @owner jQuery Object 
140.  */  
141. function replaceAll(selector);  
142.   
143. // 例子：把全部的段落標記替換成加粗標記。  
144. <p>Hello</p>  
145. <p>cruel</p>  
146. <p>World</p>  
147.   
148. $("<b>Paragraph. </b>").replaceAll("p") ->   
149.     <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>  
150. </pre>  
151. <br><br><strong style="font-weight: bold;"><span style="color: #345286;">    ●  replaceWith(content)</span>  
152. </strong>  
153. <span class="Apple-converted-space"> </span>  
154. <br><pre class="javascript" name="code">/** 
155.  * 將全部匹配的元素替換成指定的 HTML 或 DOM 元素。 
156.  * 
157.  * @content(String, Element, jQuery) 用於將匹配元素替換掉的內容 
158.  * @return Object 
159.  * @owner jQuery Object 
160.  */  
161. function replaceWith(content);  
162.   
163. // 例子：把全部的段落標記替換成加粗的標記。  
164. <p>Hello</p>  
165. <p>cruel</p>  
166. <p>World</p>  
167.   
168. $("p").replaceWith("<b>Paragraph. </b>") ->   
169.     <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>  
170. </pre>  
171. <br><br><strong style="font-weight: bold;"><span style="color: #345286;">    ●  empty()</span>  
172. </strong>  
173. <span class="Apple-converted-space"> </span>  
174. <br><pre class="javascript" name="code">/** 
175.  * 刪除匹配的元素集合中全部的子節點。 
176.  * 
177.  * @return Object 
178.  * @owner jQuery Object 
179.  */  
180. function empty();  
181.   
182. // 例子：把全部段落的子元素(包括文本節點)刪除。  
183. <p>Hello, <span>Person</span> <a href="#">and person</a></p>  
184.   
185. $("p").empty() -> <p></p>  
186. </pre>  
187. <br><br><strong style="font-weight: bold;"><span style="color: #345286;">    ●  remove([expr])</span>  
188. </strong>  
189. <span class="Apple-converted-space"> </span>  
190. <br><pre class="javascript" name="code">/** 
191.  * 從 DOM 中刪除全部匹配的元素。這個方法不會把匹配的元素從 jQuery 對象中刪除，於是能夠在未來再使用 
192.  * 這些匹配的元素。 
193.  * 
194.  * @expr(String) (可選) 用於篩選元素的 jQuery 表達式 
195.  * @return Object 
196.  * @owner jQuery Object 
197.  */  
198. function remove([expr]);  
199.   
200. // 例子一：從 DOM 中把全部段落刪除。  
201. <p>Hello</p> how are <p>you?</p>  
202.   
203. $("p").remove() -> how are  
204.   
205. // 例子二：從 DOM 中把帶有 hello 類的段落刪除。  
206. <p class="hello">Hello</p> how are <p>you?</p>  
207. $("p").remove(".hello") -> how are <p>you?</p>  
208. </pre>  
209. <br><br><strong style="font-weight: bold;"><span style="color: #345286;">    ●  clone()</span>  
210. </strong>  
211. <span class="Apple-converted-space"> </span>  
212. <br><pre class="javascript" name="code">/** 
213.  * 克隆匹配的 DOM 元素而且選中這些克隆的副本。 
214.  * 在想把 DOM 文檔中元素的副本添加到其餘位置時這個函數很是有用。 
215.  * 
216.  * @return Object 
217.  * @owner jQuery Object 
218.  */  
219. function clone();  
220.   
221. // 例子：克隆全部 b 元素(並選中這些克隆的副本)，而後將它們前置到全部段落中。  
222. <b>Hello</b><p>, how are you?</p>  
223.   
224. $("b").clone().prependTo("p") -> <b>Hello</b><p><b>Hello</b>, how are you?</p>  
225. </pre>  
226. <br><br><strong style="font-weight: bold;"><span style="color: #345286;">    ●  clone(true)</span>  
227. </strong>  
228. <span class="Apple-converted-space"> </span>  
229. <br><pre class="javascript" name="code">/** 
230.  * 元素以及其全部的事件處理而且選中這些克隆的副本。 
231.  * 在想把 DOM 文檔中元素的副本添加到其餘位置時這個函數很是有用。 
232.  * 
233.  * @true(Boolean) 設置爲 true 以便複製元素的全部事件處理 
234.  * @return Object 
235.  * @owner jQuery Object 
236.  */  
237. function clone(true);  
238.   
239. // 例子：建立一個按鈕，它能夠複製本身，而且它的副本也有一樣功能。  
240. <button>Clone Me!</button>  
241.   
242. $("button").click(function() {  
243.   $(this).clone(true).insertAfter(this);  
244. });</pre>  
245. </span>  
246. </span>