最終更新日:2019年09月25日jQueryのappendTo()メソッドを使ってHTMLの特定要素の後ろにコンテンツを追加する事ができます。jQuery初心者向けに簡単なサンプルコードと共に解説します。appendTo()メソッドでHTML要素を追加する方法HTMLの指定要素の後ろにHTML要素を追加する「appendTo()メソッド」の使い方について、実際のサンプルコードで動作を確認してみましょう。「jQuery_Sample1.html」をコピーして、任意の場所に保存して下さい。"<p>追加のコンテンツです。);});});</script></head><body><button>クリックして下さい</button><div><p>コンテンツです。</p></div></body></html>--------------------サンプルコードのボタンをクリックすると、段落タグの「コンテンツです。」というテキスト後ろに「追加のコンテンツです。」というテキストが追加されます。appendTo()メソッドの前には、追加対象のコンテンツを指定します。コンテンツはテキストのみを指定する事はできず、HTMLタグを含む文字列を指定します。appendTo()メソッドに似たappend()メソッドがありますが、append()メソッドは引数に追加対象のコンテンツを指定し、appendTo()メソッドの引数にはコンテンツを追加する対象のセレクターを指定します。「appendTo()メソッド」を使って、HTML要素を移動してみましょう。サンプルコードの「jQuery_Sample2.html」をコピーして、任意の場所に保存して下さい。class="container"><h3>1章</h3><p>1章のコンテンツです。</p><h3>2章</h3><p>2章のコンテンツです。</p></div></body></html>--------------------ボタンをクリックすると、h2見出しの「appendToメソッドの使い方」というテキストが「2章のコンテンツです。」の後ろに移動します。「appendTo()メソッド」で複数のHTML要素を追加する事ができます。サンプルコードの「jQuery_Sample3.html」をコピーして、任意の場所に保存して下さい。class="container"><h3>1章</h3><p>1章のコンテンツです。</p><h3>2章</h3><p>2章のコンテンツです。</p></div></body></html>--------------------サンプルコード(jQuery_Sample3.html)のボタンをクリックすると、二つの段落の後ろに「追加のコンテンツ」という太字のテキストを追加します。メソッドの前の括弧にstrongタグをつけたテキストを指定し、メソッドの引数に追加対象の「段落タグ(p)」を指定すると、HTML内の全ての段落タグに対して指定のテキストを追加します。Tables」について解説します。...jQueryのemptyメソッドで子要素を削除する方法jQueryのemptyメソッドで子要素を削除する方法jQueryのempty()メソッドを使ってHTMLの子要素を削除する事ができます。jQuery初心者向けに簡単なサンプ...jQuery:セレクターの使い方jQuery:セレクターの使い方jQueryでHTML内のデーターを取得するには「セレクター」を使います。コーダーを募集します。運営会社|サイトマップ|利用規約|プライバシーポリシー|お問い合わせ|企業担当者様へインターノウスのプロエンジニアでは、ITエンジニア・IT技術者の上流工程求人や、転職・キャリアアップ情報を発信しています。プログラマ、SE、ネットワークエンジニア、ITコンサルなど上流、プロジェクトマネジメントを目指す全てのITエンジニアをサポートします。reserved.無料キャリア相談をする未経験からエンジニアを目指す。