jQuery의 add()와appendto()함수 사용법 비교 설명-JS 튜토리얼-php.cn

jQuery의 add()와appendto()함수 사용법 비교 설명

巴扎黑

풀어 주다： 2017-06-24 11:21:23

원래의

2069명이 탐색했습니다.

이 글은 jquery에서append()와appendto()의 사용법을 예제를 통해 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

jQuery의 문서 연산 방식 중,append(),appendto() 메소드는 동일한 작업을 수행하지만 차이점도 있습니다.

1.append() 메소드: 선택한 요소의 끝에 지정된 내용을 삽입합니다(그러나 여전히 요소 내에 있음).

a.Syntax:

코드는 다음과 같습니다.

$(selector).append(content);

로그인 후 복사

그 중 매개변수 내용은 필수이며 추가할 내용을 지정합니다.

b 및 추가는 함수를 사용하여 선택한 요소에 내용을 추가할 수 있습니다. 구문은 다음과 같습니다.

코드는 다음과 같습니다.

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

로그인 후 복사

그 중 function()이 필요하며, 매개변수 index와 html은 선택사항입니다. Index는 수신 선택자의 인덱스 위치를 나타내고, html은 수신 선택자의 현재 html을 나타냅니다.

예:

코드는 다음과 같습니다.

 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>

로그인 후 복사

실행 결과는 다음과 같습니다.

이것은 단락입니다. Hello jQuery!

2. () 메서드: In 선택한 요소의 끝에 지정된 내용을 삽입합니다(그러나 여전히 요소 내부에 있음). 그러나 콘텐츠를 추가하는 기능을 사용할 수는 없습니다.

문법:

코드는 다음과 같습니다.

$(content).appendto(selector);

로그인 후 복사

예:

코드는 다음과 같습니다.

 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>

로그인 후 복사

실행 결과는 다음과 같습니다.

이것은 단락입니다. !

이것은 또 다른 문단입니다. Hello jQuery !

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

위 내용은 jQuery의 add()와appendto()함수 사용법 비교 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!