12 of 119 menu

appendメソッド

メソッド append は、要素の末尾に テキストを追加します。同様の動作をする メソッド appendTo もあります。

構文

要素の末尾へのテキスト挿入:

$(セレクター).append(テキスト);

選択された要素の末尾には、ユーザー定義関数によって 返されるテキストを追加することができます。 この関数は、選択された各要素に対して個別に 呼び出されます。呼び出し時には、次のパラメータが 渡されます:セット内での要素の位置、 要素の現在の内容:

$(セレクター).append(function(セット内の番号, 要素の現在の内容));

内容は通常のテキストだけでなく、DOM要素や jQueryオブジェクトにすることもできます。 この場合、それらの要素はHTMLコード内の 元の位置から移動されます。

指定された段落の末尾にテキストを挿入してみましょう:

<p id="test">text</p> $('#test').append('!!!');

HTMLコードは以下のようになります:

<p id="test">text!!!</p>

指定された段落の末尾にタグ付きのテキストを 挿入してみましょう:

<p id="test">text</p> $('#test').append('<b>!!!</b>');

HTMLコードは以下のようになります:

<p id="test">text<b>!!!</b></p>

すべての段落を見つけ、それぞれの末尾に セット内での順序番号を付けてみましょう:

<p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> $('p').append(function(index, text){return index;});

HTMLコードは以下のようになります:

<p>text0</p> <p>text1</p> <p>text2</p> <p>text3</p> <p>text4</p>

関連項目

  • 要素の末尾にテキストを追加するメソッド appendTo
  • CSSで要素の末尾にテキストを追加する疑似要素 after
  • 特定の場所にコンテンツを追加するメソッド prepend, before, after
日本語
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItalianoქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
当サイトでは、サイトの動作、分析、パーソナライゼーションのためにクッキーを使用しています。 データ処理はプライバシーポリシーに従って行われます。
すべて受け入れる 設定 拒否