jquery append 性能 jquery append方法

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>

1.  

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>