Comparative explanation of the usage of functions append() and appendto() in jQuery-JS Tutorial-php.cn

Comparative explanation of the usage of functions append() and appendto() in jQuery

巴扎黑

Release： 2017-06-24 11:21:23

Original

2070 people have browsed it

The example of this article analyzes the usage of append() and appendto() in jquery. Share it with everyone for your reference. The specific analysis is as follows:

In jQuery's document operation method, the append() and appendto() methods perform the same tasks, but there are also differences between the two.

1. append() method: Insert the specified content at the end of the selected element (but still within the element).

a. Syntax:

The code is as follows:

$(selector).append(content);

Copy after login

Among them, the parameter content is required and specifies the content to be appended.

b. append can use the function to append content to the selected element. The syntax is:

The code is as follows:

$(selector).append(function(index,html));

Copy after login

Among them, function() is required, and the parameters index and html are optional. Index represents the index position of the receiving selector, and html represents the current html of the receiving selector.

Example:

The code is as follows:

 1 <html> 
 2 <head> 
 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 
 4 <script type="text/javascript"> 
 5 $(document).ready(function(){ 
 6   $("button").click(function(){ 
 7     $("p").append(" <b>Hello jQuery!</b>"); 
 8   }); 
 9 }); 
10 </script> 
11 </head> 
12 <body> 
13 <p>This is a paragraph.</p> 
14 <p>This is another paragraph.</p> 
15 <button>在每个 p 元素的结尾添加内容</button> 
16 </body> 
17 </html>

Copy after login

The running result is as follows:

This is a paragraph. Hello jQuery !
This is another paragraph. Hello jQuery!

2. appendto() method: Insert the specified content at the end of the selected element (but still inside the element). But you cannot use functions to append content.

Grammar:

The code is as follows:

$(content).appendto(selector);

Copy after login

Example:

The code is as follows:

 1 <html> 
 2 <head> 
 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 
 4 <script type="text/javascript"> 
 5 $(document).ready(function(){ 
 6   $("button").click(function(){ 
 7     $("<b> Hello jQuery!</b>").appendTo("p"); 
 8   }); 
 9 }); 
10 </script> 
11 </head> 
12 <body> 
13 <p>This is a paragraph.</p> 
14 <p>This is another paragraph.</p> 
15 <button>在每个 p 元素的结尾添加内容</button> 
16 </body> 
17 </html>

Copy after login

The running results are as follows:

This is a paragraph. Hello jQuery!
This is another paragraph. Hello jQuery!

I hope this article will be helpful Everyone's jQuery programming helps.

The above is the detailed content of Comparative explanation of the usage of functions append() and appendto() in jQuery. For more information, please follow other related articles on the PHP Chinese website!