jQueryの関数append()とappendto()の使い方の比較説明-jsチュートリアル-php.cn

jQueryの関数append()とappendto()の使い方の比較説明

巴扎黑

リリース： 2017-06-24 11:21:23

オリジナル

2108 人が閲覧しました

この記事では、例を通して jquery の append() と appendto() の使用法を分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

jQuery のドキュメント操作メソッドでは、append() メソッドと appendto() メソッドは同じタスクを実行しますが、この 2 つには違いもあります。

1. append() メソッド: 指定されたコンテンツを選択した要素の末尾に挿入します (ただし要素の内部にあります)。

a. 構文:

コードは次のとおりです:

$(selector).append(content);

ログイン後にコピー

このうちパラメータの内容は必須であり、追加する内容を指定します。

b と append は、関数を使用して、選択した要素にコンテンツを追加できます。構文は次のとおりです。

コードは次のとおりです。

$(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!

これは別の段落です。 () メソッド:
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>

ログイン後にコピー

実行結果は次のとおりです:

こんにちは jQuery です。 !

これは別の段落です。こんにちは jQuery !

この記事が皆さんの jQuery プログラミングに役立つことを願っています。

以上がjQueryの関数append()とappendto()の使い方の比較説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。