jquery 之 append 等插入方法总结

2019独角兽企业重金招聘Python工程师标准>>>

1.append(content)：
append() 方法在被选元素的结尾（仍然在内部）插入指定内容

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

2. appendTo(content)：
appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
和append()的区别是：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

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>
    

3.prepend(content)：
prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。

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> 
    

4.prependTo(content)：
prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容。
区别于 prepend() ：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。

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> 
    

5.after(content) ：

after() 方法在被选元素后插入指定的内容。

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> 
    

5. before(content) ：
before() 方法在被选元素前插入指定的内容。   

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> 
    

6. insertAfter()：
insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。

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>

7. insertBefore(content)  ：
insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。

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>

转载于:https://my.oschina.net/china008/blog/297617