Home  >  Article  >  Web Front-end  >  Comparative explanation of the usage of functions append() and appendto() in jQuery

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

巴扎黑
巴扎黑Original
2017-06-24 11:21:231988browse

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);

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));

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 100db36a723c770d327fc0aef2ce13b1 
 2 93f0f5c25f18dab9d176bd4f6de5d30e 
 3 e237a888ddddb6a569e64fe57f33f83d2cacc6d41bbb37262a98f745aa00fbf0 
 4 8019067d09615e43c7904885b5246f0a 
 5 $(document).ready(function(){ 
 6   $("button").click(function(){ 
 7     $("p").append(" a4b561c25d9afb9ac8dc4d70affff419Hello jQuery!0d36329ec37a2cc24d42c7229b69747a"); 
 8   }); 
 9 }); 
10 2cacc6d41bbb37262a98f745aa00fbf0 
11 9c3bca370b5104690d9ef395f2c5f8d1 
12 6c04bd5ca3fcae76e30b72ad730ca86d 
13 e388a4556c0f65e1904146cc1a846beeThis is a paragraph.94b3e26ee717c64999d7867364b1b4a3 
14 e388a4556c0f65e1904146cc1a846beeThis is another paragraph.94b3e26ee717c64999d7867364b1b4a3 
15 bb9345e55eb71822850ff156dfde57c8在每个 p 元素的结尾添加内容65281c5ac262bf6d81768915a4a77ac0 
16 36cc49f0c466276486e50c850b7e4956 
17 73a6ac4ed44ffec12cee46588e518a5e

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);

Example:

The code is as follows:


 1 100db36a723c770d327fc0aef2ce13b1 
 2 93f0f5c25f18dab9d176bd4f6de5d30e 
 3 e237a888ddddb6a569e64fe57f33f83d2cacc6d41bbb37262a98f745aa00fbf0 
 4 8019067d09615e43c7904885b5246f0a 
 5 $(document).ready(function(){ 
 6   $("button").click(function(){ 
 7     $("a4b561c25d9afb9ac8dc4d70affff419 Hello jQuery!0d36329ec37a2cc24d42c7229b69747a").appendTo("p"); 
 8   }); 
 9 }); 
10 2cacc6d41bbb37262a98f745aa00fbf0 
11 9c3bca370b5104690d9ef395f2c5f8d1 
12 6c04bd5ca3fcae76e30b72ad730ca86d 
13 e388a4556c0f65e1904146cc1a846beeThis is a paragraph.94b3e26ee717c64999d7867364b1b4a3 
14 e388a4556c0f65e1904146cc1a846beeThis is another paragraph.94b3e26ee717c64999d7867364b1b4a3 
15 bb9345e55eb71822850ff156dfde57c8在每个 p 元素的结尾添加内容65281c5ac262bf6d81768915a4a77ac0 
16 36cc49f0c466276486e50c850b7e4956 
17 73a6ac4ed44ffec12cee46588e518a5e

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn