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>